仅针对悬停元素的动画

Question

尝试用我的帖子信息做一些技巧。 当我将鼠标悬停在一个元素上时，所有元素都变为活动状态。

如何只将动画制作到悬停的元素上？ 试过了：

$('.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

您需要定位特定的后代，例如：

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

-演示-

仅供参考，jQuery hover方法接受输入/输出处理程序：

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

-演示-

但是只能在支持CSS3过渡的浏览器的CSS中完成：

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

-演示CSS--

Answer 2

尝试这个：

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