Last Updated: February 25, 2016
·
286
· 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.