JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!--
This is a demo of the jQuery animation queue
(Tip #4 on http://ozkatz.github.com/5-jquery-tips-for-intermediates.html)
-->
<div class="container">
    <div class="box"></div>
</div>

<div class="queue"></div>

CSS

.container {
    height: 300px;
    width: 300px;
    background-color: #DDDDDD;
    position: relative;
    margin: auto;
}

.box {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    left: 50%;
    margin-left: -25px;
    background-color: blue;
}

JavaScript

$('.box')
    .animate({top: '-=25px'}, {duration: 200, queue: 'fx2'})
    .animate({top: '+=50px'}, {duration: 200, queue: 'fx2'})
    .animate({top: '-=50px'}, {duration: 200, queue: 'fx2'})
    .animate({top: '+=50px'}, {duration: 200, queue: 'fx2'})
    .animate({top: '-=50px'}, {duration: 200, queue: 'fx2'})
    .animate({top: '+=25px'}, {duration: 200, queue: 'fx2'})
    .animate({left: '-=25px'}, 200)
    .animate({left: '+=50px'}, 200)
    .animate({left: '-=50px'}, 200)
    .animate({left: '+=50px'}, 200)
    .animate({left: '-=50px'}, 200)
    .animate({left: '+=25px'}, 200)
    .fadeOut(400)
    .fadeIn(300)
    .slideUp(600)
    .slideDown(1500)
    .dequeue('fx2');
    

function queueStatus() {
    $('.queue').html( 'queue: ' + $('.move').queue('fx').length );
    setTimeout(queueStatus, 200);
}

setTimeout(queueStatus, 1000);