Jquery悬停动画查询

我用3个正方形建立了这个标记。悬停任何方块时，中间的水平条将执行2个动画：

为边距设置动画

设置高度动画

我已经学习了教程[http://css-tricks.com/full-jquery-animations/][1] 但是，因为有两个动画，所以一旦鼠标悬停并允许构建队列，它似乎与另一个动画冲突。要复制，请尝试在3个细胞之间剧烈移动鼠标

请看我的JS小提琴：[http://jsfiddle.net/xtTcv/][2]

HTML:

jQuery：

$(".home-feature").hover(function () { 
    $(".home-feature-text", this).filter(':not(:animated)').animate({ marginTop: "-272px" });
    $(".home-feature-text", this).animate({ height: "244px" }); 
}, function () { 
    $(".home-feature-text", this).animate({ marginTop: "-182px" }); 
    $(".home-feature-text", this).animate({ height: "62px" }); 
});

---

不在队列上放置动画将阻止队列的建立：

$(".home-feature-text", this).animate({ height: "62px" }, { queue: false }); 

您正在寻找：

  $(".home-feature-text", this).stop(true).animate({ height: "62px", marginTop: "-182px"});

---

非常接近！但是marginTop并没有在mouseout上设置动画回到垂直中心。我想我很难做到$（“.home feature text”，this.stop（true.animate）（{marginTop:“-182px”}）；

$(".home-feature-text", this).animate({ height: "62px" }, { queue: false }); 

  $(".home-feature-text", this).stop(true).animate({ height: "62px", marginTop: "-182px"});