动画仅适用于悬停元素

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

--DEMO--

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

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

--DEMO--

但只能在CSS中为support CSS3 transition：

的浏览器完成

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

--DEMO CSS--

Answer 2

试试这个：

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