javascript - 动画 jQuery 状态不成立

Question

我正在尝试为包含图像的 div 设置动画以折叠并显示其下方的 div。我将 div 放在顶部，z-index 较高，降低其高度，以显示带有悬停的 jQuery animate 函数的较低 z-index 下面的内容。但是，动画不会保持，并在完成后立即恢复。任何人都可以帮助找到解决方案，使其在光标仍悬停在框上时保持动画状态吗？

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


});

Here is the 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/