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動畫不斷重複

回答

相關問題