как определить, является ли mouseenter или mouseleave

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь добиться эффекта перебора изображений, если 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);
  };

});

Вот codepen для справки: http://codepen.io/H0BB5/pen/xEpqbv

Аналогичный эффект, которого я пытаюсь достичь, можно увидеть при наведении курсора мыши на логотип cargo на этом веб-сайте: http://cargocollective.com /

Ответ №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

1. Этот ответ и другой, похоже, делают свое дело, я не уверен, какой из двух вариантов лучше, но мне нравится, как это вызывает «mouseleave». Как бы я включил «это», чтобы указать, какой элемент находится в наведении, если на странице их несколько, будет ли этот код работать с этим? codepen.io/H0BB5/pen/mApwGV

Ответ №2:

Я бы использовал интервал и .hover() функциональность jQuery. Простая замена вашего $(".one-box").mouseenter() на this запустит цикл, пока вы зависли, и удалит его, как только ваша мышь покинет область.

Важный бит:

 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=28amp;bg=222amp;txt=300×300amp;w=300amp;h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28amp;bg=fb2amp;txt=300×300amp;w=300amp;h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28amp;bg=777amp;txt=300×300amp;w=300amp;h=300" />
      </a>
    </div>
    <div class="social_img">
      <a class="social_link" href="#">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28amp;bg=fb2amp;txt=300×300amp;w=300amp;h=300" />
      </a>
    </div>
  </div>
  <div>