2

当我将鼠标悬停在外部 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>
4

1 回答 1

1

jsBin 演示

Typo <div id-"animation">=<div id="animation">
并float:right;从#animate's CSS中删除

问：

$(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-18T02:04:00.377 回答