Question

我刚刚发现了jQuery .animate（）函数的一些奇怪行为，它是可选的回调函数。基本上我有两个功能：

第一个将页面向上滚动到顶部。这是通过此函数内的.animate（）函数完成的。一旦动画完成，.animate（）函数就会触发一个回调函数。回调函数在第一个函数的调用中传递。所以第二个函数是传递函数。这被禁止将页面向左或向右移动（取决于cklicked的内容）。有点像滑块。

我想要实现的是第一个动画运行，完成后，第二个动画运行。所以首先应该有一个动作，然后是左/右动作。这已经全部工作了但是：在完成第一个动画之后，第二个动画在延迟之后运行，该延迟与第一个动画持续时间完全一样长（我测试它，具有不同的动画持续时间。延迟相应地改变）。所以动画会：up，delay，left / right。

当我将回调函数放在动画函数之外时，两个动画同时运行，导致对角线移动。

为了更好地理解，这里是代码：

第一个功能，用于滚动页面：

function scrollUp(f){
    if ($.browser.opera) {
        var target = 'html';
    }else{
        var target = 'html,body';
    }
    $(target).animate({
        scrollTop: 0
    }, 1500, "swing", function(){
        if (typeof f == "function") f();
    }); 
};

横向移动页面的第二个功能：

function moveContent(i){
    $("div#page_wrap").animate({
        left : - (wrapper_width * i) + "px"
    }, 2000, function(){
        //do several things here
    });
};

以下是我如何将它们结合起来：

scrollUp(function(){
    moveContent(1);
});

这会导致动画首先向上滚动，然后等待1500毫秒，然后向左或向右移动。

当我这样做的时候：

function scrollUp(f){
    if ($.browser.opera) {
        var target = 'html';
    }else{
        var target = 'html,body';
    }
    $(target).animate({
        scrollTop: 0
    }, 1500, "swing");

    //callback outside of .animate()
    if (typeof f == "function") f();    
};

两个动画同时运行，或者第二个动画在第一个动画仍在运行时开始运行。

有没有人知道为什么会发生这种延迟和/或我如何避免这种情况？

THX！

编辑：

好的，我发现了错误。这就是我调用函数的方式：

$(".level_2 li a").click(function(){
    var s = $(document).scrollTop();
    if(s > 0){ // <- this here was the problem
        scrollUp();
    }
    if($(this).hasClass("mw") == true){
        if(s > 0){
            scrollUp(function(){
                moveContent(1);
            });
        }else{
            moveContent(1);
        }   
    }
});

它实际上是click函数中的第一个if语句。它向上移动页面然后检查单击了哪个链接并再次调用scrollUp（）函数。这实际上导致了延迟。删除了if语句，现在它可以正常工作。

很抱歉，我首先没有将此视为问题的一部分（所以我没有在问题中发布），猜测我没看到树木。

无论如何，非常感谢你的评论！

嵌套的jQuery动画回调函数会触发动画持续时间延迟

0 个答案: