Question

i am experiencing a problem with using the delay in jQuery’s .animation function, when moving over boxes quickly the animation doesn’t get triggered but when the same thing happens slowly it works without hitches. Any help adding a 500 millisecond delay without breaking the origional script in tact would be awesome, thanks.

Original Script Without Delay:

$(document).on('mouseenter', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).css({top:0}).animate({top:-205},{duration:500});
    $(".bottom", this).css({top:0}).animate({top:-210},{duration:500});
});
$(document).on('mouseleave', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).css({top:-205}).animate({top:0},{duration:500});
    $(".bottom", this).css({top:-210}).animate({top:0},{duration:500});
});

Example With Delay: http://jsfiddle.net/nblackburn/jSPMs/

Kind Regards,
Nathaniel Blackburn

Answer 1

Try this:

http://jsfiddle.net/jSPMs/8/

$(document).on('mouseenter', '.learnmore', function(e){
    e.preventDefault();
    var _this = $(this);
    $(this).data("timer", setTimeout(function(){
        _this.data("timer", null);
        _this.find(".top").animate({top:-205},500);
        _this.find(".bottom").animate({top:-210},500)
    }, 500));

});
$(document).on('mouseleave', '.learnmore', function(e){
    e.preventDefault();
    clearTimeout($(this).data("timer"));
    if(!$(this).data("timer"))
    {
        $(".top", this).animate({top:0},500);
        $(".bottom", this).animate({top:0},500);
    }
});