-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>

您可以这样做，存储一个全局变量并在 Hover-in 和 Hover-ou 事件上更改它的状态

于 2012-07-17T07:16:18.890 回答