JSFiddle - React, Tailwind, and code Playground

by phoffman

HTML

<nav>
    <ul>
        <li id="btn1"><a href="#">Item 1</a></li>
        <li id="btn2"><a href="#">Item 2</a></li>
        <li id="btn3"><a href="#">Item 3</a></li>
        <li id="mask"><a href="#">Menu</a></li>
    </ul>
</nav>

CSS

nav{
 position:relative;    
}
ul{
    min-height:50px;
}
ul li{
 position:absolute; 
 background-color:#ff0;    
}
#mask{
 width:40px;
height:30px;

}

JavaScript

var $tmpCount = 0;
var $tmpTime = 100;

$('#mask').click(
        function () {
            if($tmpCount == 0){
                $('#btn1').animate({left: '+=100', top: '+=0'}, 900,'easeOutElastic');
                $('#btn2').animate({left: '+=50', top:'+=50'}, 700,'easeOutElastic');
                $('#btn3').animate({left: '+=0',top: '+=100'}, 500,'easeOutElastic');
                $tmpCount++;
            }else{
                for (var count = 1; count < 4; count++){
                    $('#btn' + count).animate({left: '0', top: '0'}, $tmpTime);
                    $tmpTime = parseInt($tmpTime) + 100;
                }
             //reset the vars
             $tmpCount = 0; 
             $tmpTime = 100; 
            }
        } 
    );