Question

I’m teaching myself jQuery right now and just for fun I thought I’d expand on the example here: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation.

I’m trying to edit this simple animation so it both fades in then fades out with each successive step of the rectangle. So as the height changes the first time, I want it to simultaneously fade out. Then, as the width changes, I want it to simultaneously fade in, etc., etc. I thought I understood how to do this using function callbacks with fadeIn() and fadeOut(), but what ended up happening was ALL animations defined would run simultaneously. So I then tried the same thing using the “complete:” attribute, but that yielded the same result. What am I doing wrong? Help! Thanks in advance.

Here’s the code snippet for my animations:

    $(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

Remove the parentheses from the complete callback, e.g.

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

Also, .fadeOut() uses a different syntax from .animate(). The functions should look like this:

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

I would not recommend using W3Schools as your primary JavaScript/jQuery/etc. resource. Alternatives:

• Mozilla Dev Network for HTML, CSS, JavaScript, and more
• The jQuery API docs for jQuery