Can I use .delay() together with .animate() in jQuery?

Question

I have this code, which slides open a basket preview on a website I am working on. It stays open if the user is hovered on it, but I want it to have a two second delay before the callback for my hover is triggered. This is just in case the user didn't want the mouse to leave the basket area.

Below is the code I am using to animate the basket:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

Here is the code I tried to use, but had no affect:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});

Answer 1

I've always managed this kind of things with the help of core setTimeout and clearTimeout js functions.

Here is an example on jsFiddle

Take a look at jquery.hoverIntent plugin too, it gives you a timeout on hover and out events