Question

我现在正在教自己jQuery，只是为了好玩，我想我会扩展这里的例子：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation。

我正在尝试编辑这个简单的动画，因此它会逐渐消失，然后逐渐淡出矩形的每个连续步骤。因此，当高度第一次改变时，我希望它同时淡出。然后，随着宽度的变化，我希望它同时淡入等等等。我以为我理解如何使用fadeIn（）和fadeOut（）的函数回调来实现这一点，但最终发生的是所有定义的动画都会同时运行。然后我使用“complete：”属性尝试了同样的事情，但是产生了相同的结果。我究竟做错了什么？救命！提前谢谢。

以下是我的动画的代码段：

    $(document).ready(function(){
            $("button").click(animation1());
        });

        function animation1() {
            $("div").animate({height:300},{duration: 2000, queue: false});
            $("div").fadeOut({duration: 2000, queue:false, complete:animation2());
        }

        function animation2() {
            $("div").animate({width:300},{duration:2000,queue:false});
            $("div").fadeIn({duration: 2000, queue:false, complete:animation3()});
        }

        function animation3() {
            $("div").animate({height:100},{duration:2000,queue:false});
            $("div").fadeOut({duration:2000, queue:false, complete:animation4()});
        }

        function animation4() {
            $("div").animate({width:100},{duration:2000,queue:false});
            $("div").fadeIn({duration:2000,queue:false});
        }

Answer 1

从complete回调中删除括号，例如

function animation1() {
    $("div").animate({height:300},{duration: 2000, queue: false});
    $("div").fadeOut({duration: 2000, queue:false, complete:animation2});
}                                                          no parens ^^^

此外，.fadeOut()使用与.animate()不同的语法。功能应如下所示：

function animation1() {
    $("div").animate({height:300},{duration: 2000, queue: false});
    $("div").fadeOut(2000, animation2);
}

我不建议使用W3Schools作为主要的JavaScript / jQuery /等。资源。备选方案：

适用于HTML，CSS，JavaScript和more
jQuery的jQuery API docs

多个同时动画的多个级联

1 个答案: