Question

我正在尝试动画一个div来控制图像折叠并显示一个div在它下面。我有顶部的div，更高的z-index减少它的高度，以显示具有较低z-index的下面带有jQuery animate函数和hover。但是，动画不会保留，并在完成后立即恢复。任何人都可以帮助找到解决方案，使其保持在动画状态，同时光标仍悬停在盒子上？

 $(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/

Answer 2

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

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

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

.container{
   overflow: hidden;
   transition: height 0.15s;
}

div.artist:hover .container{
   height: 9.1vw;
}

这是jsfiddle。

Animate jQuery状态不成立

2 个答案: