jQuery Animation queue doesn't start

Question

Why does following code snippet doesn't work? It doesn't gives any error, but also it doesn't work.
About empty object I watched here.

<script type="text/javascript">

    jQuery(document).ready(function(){
        var o = jQuery({});         
        var block = jQuery('#box');
        jQuery('#start').click(function(){
            o.queue('custom',function(next){
                block.animate({left:"+=500"},1000);
                next();
            });
            o.queue('custom',function(next){
                block.animate({left:"-=500"},1000); 
                next();
            });
            o.queue('custom',function(next){
                block.animate({top:"+=500"},1000);      
                next();
            });
            o.queue('custom',function(next){
                block.animate({top:"-=500"},1000);  
                next();
            });

            o.dequeue('custom'); 
        });
    });

</script>

UPDATE 1

If I insert console.log right before and right after dequeue call like this:

            console.log(o.queue('custom').length);
            o.dequeue('custom'); 
            console.log(o.queue('custom').length);

then I get 4 0 in console. Meaning that functions are added to the queue and therefore dequeued.

UPDATE 2

If I insert console.log right after block animate, for instance, like this:

                block.animate({left:"+=500"},1000);
                console.log('1');

then I get 1 2 3 4, which means that all 4 functions are called.

UPDATE 3

My html is very simple:

1 input button and 1 div in body tag. div has following css:

width:200px;height:200px;display:block;background:none repeat scroll 0 0 green

You are applying the queue to `o` which is a plain jQuery object. Try applying it to `block`. — Rory McCrossan, Jun 29 '12 at 08:24

Wolfram · Accepted Answer · 2012-06-29T09:00:48.723

I got it working on jsbin (you can edit it with the button in the top right corner).

You need to set position:relative on the #block element. Without it, the div will not be affected by the property changes applied, because the initial value of the property is static).

From the MDN docs, the static position means:

Normal behavior. The top, right, bottom, and left properties do not apply.

However, the property does of course get changed for static elements, as you can see in this example (check the console). But they do not have any visible effect.

Hope this helps. You may revert all other changes to your code I made, that was done before setting the position.

position:relative is the reason. "The top, right, bottom, and left properties do not apply" in static. Well, very interesting note. Thank you. — Jevgeni Smirnov, Jun 29 '12 at 08:46

jQuery Animation queue doesn't start

1 Answers1