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()设置CSS - 而是依赖.animate()。

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

因此，您的代码可能如下所示（请参阅this 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);
    }
});

jQuery .animation延迟问题

2 个答案: