javascript - 如何检测 mouseenter 或 mouseleave

Question

如果 div 是否悬停，我正在尝试实现循环浏览图像的效果。

如果 mouseenter div 然后循环显示图像

如果 mouseleave div 则停止循环浏览图像并删除所有图像(只有背景图像可见)。

目前我正在使用 setTimeout 递归地触发自身，但我在使用 jquery 检测鼠标是悬停还是离开对象时遇到了问题。

function logoImageLoop() {

  $(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");

};

var oneBoxIsHover = false; 

$(".one-box").mouseenter(function(){
  timeout();

  function timeout() { 
    setTimeout(function(){
       logoImageLoop();
       timeout(); 
     }, 100);
  };

});

这是一个代码笔供引用:http://codepen.io/H0BB5/pen/xEpqbv

将鼠标悬停在本网站上的 cargo Logo 时可以看到我试图实现的类似效果:http://cargocollective.com/

Answer 1

你只需要在 mouseleave 上清除计时器。

var timer = null;
$(".one-box").mouseenter(function(){
  timeout();

  function timeout() { 
    timer = setTimeout(function(){
       logoImageLoop();
       timeout(); 
     }, 100);
  };

}).mouseleave(function(){
  clearTimeout(timer);
});

这是一个代码笔:http://codepen.io/anon/pen/rrpwYJ