JSFiddle - React, Tailwind, and code Playground

by Nivedita Gautam

HTML

<body>
    <div id="back">This is fixed.
        <div id="up">
            <p>This should slide.</p>
        </div>
    </div>
</body>

CSS

#back {
            background:#CCCCCC;
            width:200px;
            height:110px;
        }
        p {
            text-decoration:none;
            cursor:pointer;
        }
        p:hover {
            text-decoration:underline;
        }
        #up {
            background:#000000;
            opacity:0.8;
            width:200px;
            height:5px;
            position:absolute;
            color:#dedede;
            top:115px;
        }

JavaScript

$(document).ready(function () {


            $('#back').hover(function () {
                $('#up').stop().animate({
                    height: '50px',
                    marginTop: '-45px'
                }, 500);
            }, function () {
                $('#up').stop().animate({
                    height: '5px',
                    marginTop: '0px'
                }, 1000);
            });
        });