暫停jQuery動畫：使用另一個div的懸停事件。

我有一個問題，當我將鼠標懸停在外部div上時，無法暫停div上的jQuery.animate函數。我希望它停止在外部div的懸停的原因是我將重疊內部div與外部div。然後，當鼠標離開外部div時，我希望動畫在內部div上再次恢復。任何幫助將不勝感激，被困在這裏一會兒現在....暫停jQuery動畫：使用另一個div的懸停事件。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Practice</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){ 
     $(this).find("li:last").after($(this).find("li:first")); 
     $(this).css({marginTop:-73}); 
    }) 
}); 

</script>

我怎樣才能jQuery的上述動畫功能暫停在外部的div（#animation）鼠標懸停事件和簡歷在#animation div的鼠標離開？

<style type="text/css"> 

* { 
    padding:0px; 
    margin:0px; 
} 

#wrapper { 
    width:960px; 
    height:768px; 
    margin: 0 auto; 
} 

#animation { 
    width:260px; 
    height:768px; 
    float:right; 
    position:relative; 
} 

#listSlide { 
    height: 768px; 
    width:200px; 
    position:absolute; 
    left:49px; 
    overflow:hidden; 
} 

#listSlide ul { 
    height: 700px; 
} 

#listSlide ul li { 
    width:185px; 
    text-align: center; 
    height: 768px; 
    list-style: none; 
    float: left; 
    clear: left; 
    margin-bottom:-40px; 
} 
</style> 

</head> 

<body> 

<div id="wrapper"> 

    <div id-"animation"> 

     <div id="listSlide"> 
      <ul> 
       <li><img src="images/belt.png" alt="Belt 1" /></li> 
       <li><img src="images/belt.png" alt="Belt 2" /></li> 
       <li><img src="images/belt.png" alt="Belt 3" /></li> 
       <li><img src="images/belt.png" alt="Belt 4" /></li> 
      </ul> 
     </div> 

    </div> 

</div> 

</body> 

</html>

來源

2012-12-18 Dwain Maxwell

http://stackoverflow.com/questions/5586068/jQuery的暫停 - 重啓 - 阿尼馬特e – joequincy

設置演示（http://jsfiddle.net）以便其他人可以幫助排除故障。 – JSuar

jsBin demo

錯字<div id-"animation"> = <div id="animation">
和不同於#animate的CSS

JQ除去float:right;：

$(document).ready(function(){ 

    function anim(){ 

    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){ 
     $(this).find("li:last").after($(this).find("li:first")); 
    }); 

    } 
    anim(); // initial kick 

    $('#animation').on('mouseenter mouseleave',function(e){ 
    var mEnter = e.type=='mouseenter' ? // if 
     $("#listSlide ul").stop(1) : // is mouseenter (STOP!) 
           anim() ; // is mouseleave (ANIM!) 
    }); 

});

來源

2012-12-18 02:04:00

感謝您的快速回復，我目前得到了代碼工作，但是當它被徘徊（mouseenter，mouseleave）3-5倍的動畫開始減慢時，您是否有任何想法爲什麼它不會保持一致的速度？ –

@DwainMaxwell是這樣的嗎？ http://jsbin.com/udinaj/6/edit，但（目前只是不停止在某個位置，但...）我真的不知道你爲什麼使用'$（this）.find（。「李：最後一個」）後（$（本）.find（「李：第一」））;' –

暫停jQuery動畫：使用另一個div的懸停事件。

回答

相關問題