Last Updated: February 25, 2016
·
200
· whitneykrape

Stack jQuery events on elements to avoid delays.

Don't do this:

$('.feature').mouseenter( function() {
  $(this).animate({
    height: 540
  }, 'fast', function() {}); 
});

$('.feature').mouseleave( function() {
  $(this).animate({
    height: 300
  }, 'fast', function() {}); 
});

Do this:

$('.feature').mouseenter( function() {
  $(this).animate({
    height: 540
  }, 'fast', function() {}); 
}).mouseleave( function() {
  $(this).animate({
    height: 300
  }, 'fast', function() {}); 
});

To avoid jQuery delaying each time to interact with an element.