-2

テキストの上にマウスを置いたときにアニメーションを停止したい。しかし、マウスオーバーでアニメーションを停止する方法がわかりません。

私のコードは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Animation</title>
        <script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
        <script>
            function tick2(){
                jQuery('#ticker_02 li:first').slideUp(function(){
                   jQuery(this).appendTo(jQuery('#ticker_02')).slideDown(); 
                   jQuery("#ticker_02 ul > li:lt(2)").show();
                   jQuery("#ticker_02 ul > li:gt(2)").hide();  
                });
            }
            setInterval(function(){ tick2 () }, 3000);
        </script>
    </head>
    <body>
        <ul class="ticker" id="ticker_02">
             <li>Looong text.....</li>
             <li>Looong text.....</li>
             <li>Looong text.....</li>
             <li>Looong text.....</li>
        </ul> 

    </body>
</html>
4

3 に答える 3

1

jQuery.stopメソッドを試してください。

$(".someMovingBlock").animate({left: '-=100px'}, 10000); //Start animation.

$(".someMovingBlock").mouseover(function(){ //Stop on mouseover.
  $(this).stop();
});
$(".someMovingBlock").mouseout(function(){
  $(this).animate({left: '-=' + (100 - $(this).position().left) + 'px'}, 10000); //Continue on mouseout.
});
于 2012-07-17T07:14:36.363 に答える
1

これでおそらく十分です...または「実際の」アニメーションを一時停止する必要があります。

function tick2(){
    $('#ticker_02 li:first').slideUp( function () {
        $(this).appendTo(jQuery('#ticker_02')).slideDown(); 
        $("#ticker_02 ul > li:lt(2)").show();
        $("#ticker_02 ul > li:gt(2)").hide();  
    });
}
var interval_id = setInterval(tick2, 3000);
$(".ticker").mouseover(function(){
   clearInterval(interval_id);                                             
}).mouseout(function(){
     interval_id = setInterval(tick2, 3000);       
});​
于 2012-07-17T07:24:40.057 に答える
0 
<script>
            var paused = false;
            function tick2(){ 
                if(paused)
                  return false;
                jQuery('#ticker_02 li:first').slideUp( function () {jQuery(this).appendTo(jQuery('#ticker_02')).slideDown(); 
                jQuery("#ticker_02 ul > li:lt(2)").show();
                jQuery("#ticker_02 ul > li:gt(2)").hide();  
                });
            }
            setInterval(function(){ tick2 () }, 3000);
                $("element").hover(
  function () {
    paused = true;
  }, 
  function () {
    paused = false;
  }
);
        </script>

このようにして、グローバル変数を保存し、ホバーインおよびホバーアウトイベントで状態を変更できます

于 2012-07-17T07:16:18.890 に答える