Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #aaa; } 
  
#box { 
    border: 1px solid red; 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    background-color: #f00;
    top: 500px;
    left: 10px;
}
</style> 
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
​
<script>
​
$(document).ready(
    function()
    {
        $('#nonStopAnimation').click(nonStopAnimation); 
        
        $('#stopAnimationQueue')
            .click(
                    function()
                    {
                        //By default all animation for particular 'selector'
                        //are queued in queue named 'fx'.
                        //By clearning that queue, you can stop the animation.
                        $('#box').queue('fx', []);
​
​
                    }
                );
​
        $('#addAnimation')
            .click(
                    function()
                    {
                        $('#box').queue(
                                function()
                                {
                                    $(this).animate({ height : '-=25'}, 2000);
                                    //De-queue our newly queued function so that queues
                                    //can keep running.
                                    $(this).dequeue();
                                }
                            );
                    }
                );
​
        $('#stopAnimation')
            .click(
                    function()
                    {
                        $('#box').stop();
                    }
                );
​
        setInterval(function()
                    {
                        $('#currentQueueLength').html('Current Animation Queue Length for #box ' + $('#box').queue('fx').length);
                    }, 2000);
    }
​
);
​
function nonStopAnimation()
{
    //These multiple animate calls are queued to run one after
    //the other by jQuery.
    $('#box').animate({ left: '+=500'}, 4000);
    $('#box').animate({ top: '+=500'}, 4000);
    $('#box').animate({ left: '-=500'}, 4000);
    $('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}
​
</script>
​
</head> 
<body> 
    <h1>jQuery Queue Demo</h1> 
​
    <p><a href="#" id="nonStopAnimation">1. Click here to start non-stop animation.</a><br />
        By clickin on this link, you will start animation where the box will move 500 pixels on right, 500 pixels down,
        500 pixels left and 500 pixels top to come back to the original position.
    
    </p>
​
    <p>
        <a href="#" id="stopAnimationQueue">2. Stop Animation using Queue</a> <br />
        Notice how the currently played animation finishes but the subsequent queued animations won't run.
        Also notice how the queue length goes to zero once you click on this link.
    </p>
    <p>
        <a href="#" id="stopAnimation">3. Stop Animation using 'stop' method.</a><br />
        Notice how the currently played animation stops right away, but the next queued animation starts.
        Also notice how the queue length doesn't become zero and the next animation starts.
    </p>
​
    <p><a href="#" id="addAnimation">4. Add reduce height animation to current queue.</a><br />
        If you click on this link, an animation to change background color will be added at the end of the queue.
        So when the box returns to its original position, its height will reduce by 25 pixels.  
    </p>
​
    <span id="currentQueueLength"></span>
​
    <div id='box'>
​
    </div>
</body> 
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
adrien-bepro
0viewers