jQuery动画不断重复

我遇到了重复jQuery动画的问题，而关于stop（）的常规建议似乎没有帮助。jQuery动画不断重复

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

我的代码部分的工作原理，但只有在用户将鼠标悬停和缩小的图像的左侧（即，远离该覆盖）。如果用户在显示时将鼠标悬停在叠加层上，那么这似乎算作一个鼠标移出事件并触发动画，这不是我想要的。一旦发生这种情况，动画开始重复。

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

任何帮助将不胜感激。

来源

2012-08-06 anaximander

我认为问题在于您将鼠标悬停在图像上，因此当div覆盖图像时，您不再将鼠标悬停在图像上，然后熄灭，然后再次返回到图像

你需要做的就是把两种这些div在div容器是什么，然后将鼠标事件适用于

即

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

和：

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

来源

2012-08-06 14:18:39 Chris

好想，克里斯，但没有骰子。如果我添加一个容器div并将悬停事件应用于其中，则会出现相同的行为。 – anaximander 2012-08-06 14:27:57

创建的jsfiddle和它:) – Chris 2012-08-06 14:32:50

之前从未使用过的jsfiddle我会看一看，所以我可能会做这种错误，但http://jsfiddle.net/anaximander/uhkVn/ – anaximander 2012-08-06 14:41:16

jQuery动画不断重复

回答

相关问题