Cancel mouseleave event on mouseover

Question

I'm trying to replicate the effect on this page: http://blacknegative.com/#!/bullittagency/ (you might have to swipe to the right, click on 'Menu' and select section 04 to see it)

This is what I have so far: http://codepen.io/semajtwin/pen/IcBxu

The problem is that repeatedly moving the mouse from one box to another the mouseleave event is still fired. I'm trying to find a way to cancel the mouseleave event on a div if the mouse is back on the div. Maybe there's a better way to do this.

jQuery:

$(document).ready(function() {

  $('.item').mouseenter(function() {
    $(this).css({
      'opacity': 0
    });
  }).mouseleave(function() {
    $(this).delay(300).animate({
      'opacity': 1
    }, 500);
  });
});

Thanks in advance.

Answer 1

You can use the stop() function to stop the animation created in the mouseleave event:

$(document).ready(function() {

  $('.item').mouseenter(function() {
    $(this).stop().css({
      'opacity': 0
    });
  }).mouseleave(function() {
    $(this).delay(300).animate({
      'opacity': 1
    }, 500);
  });
});

Working Demo