jQuery动画不断重复
jQuery动画不断重复
提问于 2012-08-06 22:16:01
我在重复jQuery动画时遇到了问题，关于stop()的传统建议似乎没有什么帮助。
我有个图像。当用户将鼠标移到图像上时，我希望从右侧滑入一个白色、透明的覆盖。当用户鼠标移出时，我希望它消失。
我的代码部分工作，但只有当用户鼠标移入和移出图像的左侧(即远离覆盖)时。如果用户在显示时将鼠标移到覆盖图上，这似乎会被算作鼠标输出事件，并触发动画，这不是我想要的。一旦发生这种情况，动画就会开始重复。
HTML：
<img src="Crowded_bookshelf.png" height="367" width="367" id="theImage">
<div id="overlay1"></div>CSS：
#theImage {
border-radius: 184px;
}
#overlay1 {
height:400px;
width:240px;
background-color:white;
opacity:0.9;
position:absolute;
left:400px;
top:60px;
}jQuery：
$('#theImage').hover(
function() {
$('#overlay1').animate(
{
left: '190px'
},
1000
);
},
function() {
$('#overlay1').animate(
{
left: '400px'
},
1000
);
}
);任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-06 22:18:39
我认为问题是您将鼠标悬停事件应用于图像本身，因此当div覆盖图像时，您不再将鼠标悬停在图像上，它会熄灭，然后又会重新出现。
您需要做的是将这两个div都放在一个容器div中，然后将鼠标事件应用于该div
即
<div id="container">
<img src="Crowded_bookshelf.png" height="367" width="367" id="theImage">
<div id="overlay1"></div>
</div>和：
$('#container').hover(...);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11830076
复制相关文章
相似问题
腾讯云开发者
