CODEWITHSUNDEEP
jqueryjquery-animate
Jammer
Jammer

Reputation: 2410

jQuery animation delay not working

I am animating a div when a user hovers over and just wanted a bit of a delay on it but it doesn't seem to add the delay in, is there something i'm doing wrong?

$(".carousel-desc").mouseenter(function () {
    $(this).delay(1000).animate({ 'height': '180px' }, { queue: false, duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).delay(1000).animate({ 'height': '40px' }, { queue: false, duration: 600 });
});

Thanks, J.

Upvotes: 1

Views: 2398

Answers (3)

Kalle H. Väravas
Kalle H. Väravas

Reputation: 3615

I agree with Snicksie, however, for your current case of code, there is a better approach:

$('.carousel-desc').hover(function () {
    $(this).delay(1000).animate({
        'height': '180px'
    }, 600);
}, function () {
    $(this).delay(1000).animate({
         'height': '40px'
     }, 600);
});

[ View output ]

Upvotes: 0

Snicksie
Snicksie

Reputation: 1997

I think the problem is queue: false; Usally your animation get queued, but you let the animate-function animate immediately.

Maybe this will do what you propably need:

$("#element").mouseEnter(function(){
   $("#element").clearQueue();
   //other stuff
}

for your stuff:

$(".carousel-desc").mouseenter(function () {
    $(this).clearQueue();
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).clearQueue();
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 });
});

Upvotes: 4

Sander
Sander

Reputation: 13421

.delay() delays an animation queue

since you put queue: false in your animation options, it is executed immediately.

use it like this and it will be fixed

$(".carousel-desc").mouseenter(function () {
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 });
});

working example: http://jsfiddle.net/hxfGg/

Upvotes: 2

Related Questions