4

我在重复 jQuery 动画时遇到了麻烦，关于 stop() 的传统建议似乎没有帮助。

我有一个图像。当用户将鼠标悬停在图像上时，我想要一个白色的透明覆盖层从右侧滑入。当用户鼠标移出时，我希望它消失。

我的代码部分有效，但前提是用户在图像左侧进出鼠标（即远离叠加层）。如果用户在显示时将鼠标悬停在覆盖层上，这似乎算作 mouseout 事件并触发动画，这不是我想要的。一旦发生这种情况，动画就会开始重复。

的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
            );
        }
    );

任何帮助将不胜感激。

4

1 回答 1

4

我认为问题在于您将鼠标悬停事件应用于图像本身，因此当 div 覆盖图像时，您不再将鼠标悬停在图像上，它会熄灭，然后又重新进入

您需要做的是将这两个 div 放入容器 div 中，然后将鼠标事件应用于该容器

IE

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

和：

$('#container').hover(...);
于 2012-08-06T14:18:39.300 回答