What is the correct way to combine multiple animations with jQuery?

This is what I have written as my animation - however it applies to all my HTML elements with this animation at the same time instead of each one as its own animation process.

What am I missing?

// JavaScript Document
          $(document).ready(function(){ 
               $('.learnmore').mouseenter(function(){
                  $(".cover").stop().animate({top:'150px'},{ duration:160});
                });

                $('.learnmore').mouseleave(function(){
                      $(".cover").stop().delay('2500').animate({top:'300px'},{ duration:160,easing:'easeOutBounce'});
                });


        });  

see example here. http://jsfiddle.net/robx/VdUuM/3/ Explanations also commented on there with the code.

You need more specific CSS in place of $(".cover"). Something like

$(this).children('.cover')...

Or

$('.learnmore .cover')...