Question

我遇到了重复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
            );
        }
    );

非常感谢任何帮助。

Answer 1

我认为问题在于你是将鼠标悬停在图像本身的事件上，所以当div覆盖图像时，你不再将鼠标悬停在图像上，它就会熄灭，然后重新进入

你需要做的是将这两个div放在容器div中，然后将鼠标事件应用到

即

<div id="container">
    <img src="Crowded_bookshelf.png" height="367" width="367" id="theImage">
    <div id="overlay1"></div>
</div>

和

$('#container').hover(...);

jQuery动画不断重复

1 个答案: