Question

我想在鼠标悬停文本时停止动画。但我不知道如何在鼠标悬停时停止动画。

我的代码是

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

Answer 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.
});

Answer 2

this可能已经足够......或者是否需要暂停“真正的”动画。

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

Answer 3

<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-ou事件的

上更改状态

鼠标悬停jQuery

3 个答案: