Whitney Krape

Tag: FrontEnd

  • Stack jQuery events on elements to avoid delays.

    While building a bit of code for phlodl.com jQuery was acting up when adding a simple mouseover to expand and the event was delayed when the mouse entered the element. To fix this I daisy-chained the events on the element to fix the delays:

    Delayed animation:

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

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

    Seamless:

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