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

调用特定的回调时，尽量不要使用.css()设置.animate()而是依赖.animate() 。

另外，您可以使用.animate .animate()的.animate()排队版本（只需通过选项queue=false ）。

结果，您的代码可能如下所示（请参阅此jsfiddle ）：

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

看起来运行起来很顺利。 是不是

有帮助吗？

Answer 2

尝试这个：

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