在鼠标悬停停止jquery动画

Question

我发现这个伟大的垂直幻灯片脚本。 我的问题是，我无法找到一种方法来停止在鼠标上的幻灯片播放。 请你能帮我吗？先谢谢你 ！

setInterval(

    function() { 
     $('#ticker div').each(function() { 
      $(this).animate({ 
       'top': '-=10px', 
      }, 120, 

      function() { 
       var top = parseInt($(this).css('top').replace('px', '')) + 
         parseInt($(this).css('height').replace('px', '')); 

       if (top < 0) { 
        //console.log('removing', this) 
        var clone = $(this).clone(); 
        var parent = $(this).parent(); 
        clone.css('top', '550px'); 
        $(this).remove(); 
        parent.append(clone); 
       } 
      }) 
     }) 
    }, 40 
) 

Answer 1

如果您存储了intervalID，则可以停止该间隔。这可能对你有用。代码看起来象下面这样：

var intervalID = null; 
function startSlideshow() { 
    intervalID = setInterval(function() { 
     //do stuff 
    }, 40); 
} 

$("#mySlideshow") 
    .mouseover(function() { 
     if(intervalID) { 
      clearInterval(intervalID); 
     } 
    }) 
    .mouseleave(function() { 
     startSlideshow(); // restart slideshow when the user isn't hovering anymore 
    }); 

startSlideshow(); //initially start slideshow. 

您可以在MDN找到clearInterval更多信息。

Answer 2

这里是代码 -

$("#ticker div").mouseover(function(){ 
    $(this).stop(); 
});