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>

上記のjQueryanimate関数を取得して、外部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デモ

タイプミス<div id-"animation">=そしてCSSから<div id="animation">
削除するfloat:right;#animate

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

});
于 2012-12-18T02:04:00.377 に答える