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

当我在本网站上悬停货物标志时，可以看到我想要达到的类似效果：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);
});

这是一个codepen：http://codepen.io/anon/pen/rrpwYJ

Answer 2

我会使用一个间隔和JQuery .hover()功能。只需用你的$(".one-box").mouseenter()替换就可以在你徘徊时运行循环，并在你的鼠标离开该区域时将其移除。

重要的一点：

var imageChangeInterval;

$(".one-box").hover(function() {
  imageChangeInterval = setInterval(function() {
    logoImageLoop();
  }, 100);
}, function() {
  clearInterval(imageChangeInterval);
});

完整示例：

function logoImageLoop() {
  $(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;


// New code:
var imageChangeInterval;

$(".one-box").hover(function() {
  imageChangeInterval = setInterval(function() {
    logoImageLoop();
  }, 100);
}, function() {
  clearInterval(imageChangeInterval);
});

.one-box {
  position: relative;
  height: 300px;
  width: 300px;
}
.one-box a {
  width: 100%;
}
.one-box a img {
  max-width: 100%;
}
/* .social_img { display: none; } */

a#social_logo {
  background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  position: absolute;
  width: 73px;
  height: 73px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.one_box .social_gallery {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  display: none;
}
.nav_logo .social_gallery .social_img {
  position: absolute;
  float: none;
  margin: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  overflow: hidden;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
  <a id="social_logo" href="#" alt=""></a>
  <div class="social_gallery img_wall gallery">
    <div class="social_img wall_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
      </a>
    </div>
  </div>
  <div>

如何检测mouseenter或mouseleave

2 个答案: