Delay the beginning of an animation

I'm trying to end this animation after a couple of seconds. I'll give you a few secs to study my markup.

$(document).ready(function () {

       //when mouse enters .box .cover will animate to go to 150px
        $('.box').mouseenter(function () {
            $(this).parent().find('.cover').stop().animate({
                top: '150px'
             })
        //when mouse leaves .box - .cover will set back to 300px
       .mouseleave(function () {
            $(this).parent().find('.cover').stop().animate({
                top: '300px',
                duration: 300        
            })
          });
        });



});

What I want to do is after my mouse leaves .cover I want to wait a few seconds for .cover to go to top:300px.

How can I achieve this? Any possible solutions? Can you also explain shortly what I was missing and what I am do开发者_运维技巧ing wrong? I want to learn what I did wrong or what I missed.

Thanks Stack Overflow!

Delay it

edit: This:

$(this).parent().find('.cover').stop().animate({
                top: '300px',
                duration: 300        
            })

change for:

$(this).parent().find('.cover').stop().delay(4000).animate({
                top: '300px',
                duration: 300        
            })