Fun with jQuery Queues

Some experiments with jQuery queues

by deanpeters

HTML

<!DOCTYPE>
<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <div id="container-1">
        </div><!-- /#container-1 -->
        <fieldset id="container-2">
            <label>container #2</label>
        </fieldset><!-- /#container-2 -->
        <div id="container-3">
            <ul />
        </div><!-- /#container-3 -->


<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]); 
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]); 
    _gaq.push(['_trackPageview']);
 
     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>
        
    </body>
  
</body>


</html>

JavaScript

/* fx queue */
$("#container-1").queue(function(next) {
    $("<h2 />", {"id": "title-1", "text":"Using FX Queue"}).appendTo("#container-1");
    console.log("I was queued!");
    next();
});



/* we're making an array of LI elements 
* trying animate as a queue: http://stackoverflow.com/questions/1898496/jquery-while-loop-not-waiting-for-animation
*/
var liAry = [];
for(ii = 0; ii < 5; ii++) {
    liAry.push( $("<li />", {"id":"list-" + ii, "text": "Item #" + ii + " via namedQueue"}) );
}


$("#container-3").queue(
    function( ) {
    var time = $.fx ? $.fx.speeds[time] || time : 5000;
    var type = type || "fx";

    var elem = this; /* make $(this) visible inside other blocks */
        
    for (el in liAry) {
        $(elem, "ul").append(liAry[el]);
     }
            

    setTimeout(function() {
        $.dequeue( elem, type );
    }, time );

});


/* http://stackoverflow.com/questions/1095263/how-do-i-chain-or-queue-custom-functions-using-jquery */

/* http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/ */