how to detect if mouseenter or mouseleave

Question

I am trying to achieve an effect of looping through images if a div is hovered or not.

If mouseenter div then cycle through images

if mouseleave div then stop cycling through images and remove all images (only background image will be visible).

currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.

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

});

Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv

A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/

Answer 1

You just need to clear the timer on mouseleave.

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

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

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

Here's a codepen: http://codepen.io/anon/pen/rrpwYJ

Answer 2

I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.

The important bit:

var imageChangeInterval;

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

Full example:

 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>