Question

I read up on jQuery delaying, but I can’t seem to delay my animation for this mouseover call:

$("div#test").mouseover(function ()
{
    $("div#test").delay(1000).animate({width:100}, {queue:false});  
    $("div#test").delay(1000).animate({height:100}, {queue:false});
});

What am I doing wrong here?

Answer 1

The problem is the queue: false boolean, which has the effect of starting the animation immediately (from the API page for animate()):

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

Removing that, and combining effects into one animate() call seems to make things work as expected:

$("div#test").mouseover(function ()
{
    $(this)
        .delay(1000)
        .animate({width:100, height: 100});
});​

JS Fiddle demo.

References:

• animate().
• delay().