暂停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的悬停事件。

回答

相关问题