Animation only for hovered element

Question

Trying to do some trick with my post information. When I hover mouse on one element - all elements became active.

How can I made this animation only to hovered element? Tried it:

$('.post-pic-holder').find('.post-info').hover(function(){
 $(this).animate({bottom:'0'},200);
},function(){
 $(this).animate({bottom:'-30px'},200);
});

http://jsfiddle.net/fresa150/8ftnF/

Answer 1

You need to target specific descendant, eg:

$(document).ready(function(){
    $('.post-pic-holder').hover(function(){
        $(this).find('.post-info').animate({bottom:'0'},200);
    },function(){
        $(this).find('.post-info').animate({bottom:'-30px'},200);
    });
});

--DEMO--

FYI, jQuery hover method accepts in/out handler:

$('.post-pic-holder').hover(function (e) {
    $(this).find('.post-info').animate({
        bottom: e.type === "mouseenter" ? 0 : -30
    }, 200);
});

--DEMO--

But could be done only in CSS for browser which support CSS3 transition :

.post-info {    
    transition: bottom 200ms;
}
.post-pic-holder:hover .post-info {
    bottom: 0;    
}

--DEMO CSS--

Answer 2

Try this:

$(document).ready(function(){
  $('.post-pic-holder').hover(function(){
    $(this).first().animate({bottom:'0'},200);
      },function(){
    $(this).first().animate({bottom:'-30px'},200);
     });
 });