jQuery .animation 延迟问题

Question

我在使用 jQuery 的 .animation 函数的延迟时遇到问题，当快速移动框时，动画不会被触发，但当同样的事情缓慢发生时，它可以顺利运行。在不破坏原始脚本的情况下添加 500 毫秒延迟的任何帮助都很棒，谢谢。

没有延迟的原始脚本:

$(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});
});

延迟示例: http://jsfiddle.net/nblackburn/jSPMs/

亲切的问候，
纳撒尼尔·布莱克本

Answer 1

试试这个:

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);
    }
});