Jquery 动画延迟问题

我在使用jQuery的.animation函数时遇到了一个问题，当快速移动方框时，动画不会被触发，但当同样的事情发生得很慢时，它会正常工作。任何在不破坏原始脚本的情况下添加500毫秒延迟的帮助都将非常棒，谢谢

原稿立即：

延迟的示例：

亲切问候,， Nathaniel Blackburn

在调用特定回调时，尽量不要使用.CSS设置CSS，而是使用.animate

另外，您还可以使用.animate just pass选项queue=false的非排队版本

因此，您的代码可能如下所示，请参见：

看起来很顺利。不是吗

有帮助吗？

试试这个：

---

这很好，但延迟似乎不是在我悬停在它上面时触发的，而不是在：完美之后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});
});

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

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