JSFiddle - React, Tailwind, and code Playground

by nickaknudson

HTML

<div class="container">
    <div class="content">
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
    </div>
</div>
<a href="#" id="up">Up</a>

<a href="#" id="down">down</a>

CSS

.container {
    height:100px;
    background:red;
    padding:0 10px;
    overflow:hidden;
}
.content {
    background:#eee;
}

JavaScript

$(document).ready(function () {

    if ($('.content').height() > $('.container').height()) {
        $("#down").hover(function () {
            animateContent("down");
        }, function () {
            $('.content').stop();
        });

        $("#up").hover(function () {
            animateContent("up");
        }, function () {
            $('.content').stop();
        });
    }
});

function animateContent(direction) {
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content').animate({
        "marginTop": animationOffset + "px"
    }, "fast");
}