动画jQuery状态不成立
动画jQuery状态不成立
提问于 2014-02-12 23:32:51
我正在尝试动画一个包含图像的div，以折叠并显示它下面的div。我让div在顶部有一个较高的z索引，减少它的高度，以显示下面有一个较低的z索引，并带有一个带有悬停的jQuery动画函数。但是，动画不会保持不变，并在完成后立即恢复。有人可以帮助找到解决方案，使它停留在动画状态，而光标仍然悬停在框上？
$(document).ready(function() {
$('.artist').hover(function() {
$('.container',this).animate({'height':'9.1vw'}, 'fast');
});
});Here is the JSFiddle
回答 2
Stack Overflow用户
发布于 2014-02-13 00:00:26
以下是更新后的代码。您设置的是.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/
Stack Overflow用户
发布于 2014-02-13 00:15:20
问题出在.container中的图像。它只是在动画完成后调整大小。
您可以通过多种方式解决此问题。您可以在容器上设置overflow:hidden;，您可以选择改为调整图像大小，或者同时调整图像大小。这取决于你想要的最终结果。例如，调整图像的大小可能会改变它的纵横比并毁掉照片，所以如果你想避免这种情况，可以使用overflow: hidden;选项。
除此之外，我建议将动画更改为css，如下所示：
.container{
overflow: hidden;
transition: height 0.15s;
}
div.artist:hover .container{
height: 9.1vw;
}这是jsfiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21732297
复制相关文章
相似问题
腾讯云开发者
