Animate jQuery 状态不成立

Question

我正在尝试将一个拿着图像的div动画折叠起来并显示其下方的div。我将div 放在顶部，较高的 z 索引降低其高度，以显示带有较低 z 索引的下方内容，并带有带有悬停的 jQuery 动画函数。但是，动画不会保持，并在完成后立即还原。任何人都可以帮助找到解决方案，使其在光标仍悬停在框上时保持动画状态？

 $(document).ready(function() {
    $('.artist').hover(function() {
        $('.container',this).animate({'height':'9.1vw'}, 'fast');
    });

});

这是 JSFiddle

Answer 1

这是更新的代码。您正在对 .container 进行动画处理，而不是对 .artistimage 进行动画处理。

$(document).ready(function() {
    $('.artist').on("mouseenter", function() {
        $('.artistimage',this).animate({'height':'9.1vw'}, 'fast');
    }).on("mouseleave",function(){
            $('.artistimage',this).animate({'height':'11.5vw'}, 'fast');
    });
});

这是JSFIDDEL ： http://jsfiddle.net/LCPJc/3/

Answer 2

问题是.container内部的图像。它只是在动画完成后调整大小。

您可以通过多种方式解决此问题。您可以在容器上设置overflow:hidden;，可以选择调整图像大小或同时调整两者。这取决于您想要的最终结果。例如，调整图像大小可以更改图像的纵横比并破坏照片，因此如果您想避免这种情况，可以使用overflow: hidden;选项。

除此之外，我建议将动画更改为css，如下所示：

.container{
   overflow: hidden;
   transition: height 0.15s;
}
div.artist:hover .container{
   height: 9.1vw;
}

这是jsfiddle。