暂停 jQuery 动画：使用另一个 div 的悬停事件。答案

【问题标题】：Pause jQuery Animation: using hover event of another div.暂停 jQuery 动画：使用另一个 div 的悬停事件。
【发布时间】：2012-12-18 01:50:12
【问题描述】：

当我将鼠标悬停在外部 div 上时，我无法在 div 上暂停 jQuery.animate 函数。我希望它在外部 div 悬停时停止的原因是我将内部 div 与外部 div 重叠。然后，当鼠标离开外部 div 时，我希望动画在内部 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 animate 函数在外部 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>

【问题讨论】：

stackoverflow.com/questions/5586068/jquery-pause-resume-animate
设置演示 (jsfiddle.net)，以便其他人可以帮助解决问题。

标签： jquery

【解决方案1】：

jsBin demo

错字<div id-"animation"> = <div id="animation">
然后从 #animate 的 CSS 中删除 float:right;

jQ：

$(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!)
  });

});

【讨论】：

感谢您的快速回复，我目前已经让代码正常工作，但是当它悬停（mouseenter，mouseleave）3-5 次时，动画开始变慢，您知道为什么它不会保持一致的速度？
@DwainMaxwell 是这样的吗？ jsbin.com/udinaj/6/edit 但是（只是目前没有停在某个位置但是......）我真的不知道你为什么使用$(this).find("li:last").after($(this).find("li:first"));