Question

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.

Answer 1

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 });
});