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

Answer 1

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.