JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<ul id="navigation">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
    <li><a href="">Menu 4</a></li>
</ul>

CSS

#navigation { }
#navigation li { 
    background: #06F; 
    height: 20px; 
    float: left; 
    list-style: none; 
    padding: 5px 10px; 
}    
#navigation li a { color: #FFF; }

JavaScript

$('#navigation li').hover(function() {
    $(this).stop(true).animate({
        height: '60px',
        backgroundColor: '#CCC',
        marginTop: '-10px'
    }, {
        easing: 'easeOutBounce'
    })
}, function() {
    $(this).stop(true).animate( //stop makes the animation stop as soon as the other one gets triggered
    {
        height: '20px',
        backgroundColor: '#900',
        marginTop: '0'
    }, {
        easing: 'easeOutBounce'
    })
}

);