javascript - jQuery 动画意外滞后

Question

我正在尝试使用 jQuery 创建“悬停”效果。 它工作正常，除了只有在第一次调用完整回调时才会出现奇怪的滞后 - 我注意到这是 唯一 它实际到达它应该的确切位置的时间(其余的少了 ~1px，但那是很好)，在那里停留一会儿，然后继续动画，从那时起它就可以顺利工作了。

我用我的代码创建了一个 jsFiddle here这是我编写的代码。

function hover(el, speed, start, stop) {
    if (el.is(':visible')) {
        el.animate({
            'top': stop + 'px'
        }, speed, function () {
            el.animate({
                'top': start + 'px'
            }, speed, hover(el, speed, start, stop));
        });
    }
}

$("div > div").fadeIn(1000, function () {
    hover($(this), 1000, 192, 210);
});

我是否遗漏了一些明显的东西？这是一个错误吗？我在滥用什么东西吗？

感谢任何帮助，谢谢!

Answer 1

延迟是因为在 hover() 函数的第二次调用中你的元素已经在顶部:210px 所以它只是等待 1sec 没有，要解决这个问题只需切换函数中的开始和停止点

function hover(el, speed, start, stop) {
    if (el.is(':visible')) {
        el.animate({
            'top': start + 'px'
        }, speed, function () {
            el.animate({
                'top': stop + 'px'
            }, speed, hover(el, speed, start, stop));
        });
    }
}

所以延迟会在一开始就不会被注意到

编辑

一个解决方法是在第一时间给它一脚:

var firstTime = true ; //this is global
function hover(el, speed, start, stop) {
    if (el.is(':visible')) {
        el.animate({
            'top': start + 'px'
        }, speed, function () {
            if(firstTime){
            el.animate({'top' : stop +"px" } , speed , function(){
                //something here 
            });
            firstTime = false; 
        }
        el.animate({
                'top': stop + 'px'
            }, speed, hover(el, speed, start , stop));
        });
    }
}