How to use callbacks in JQuery?

callback, jquery

Solution

You should not define a variable multiple times in the same scope, this is your code using callback functions, note that you can animate multiple properties using one animate method.

.animate( properties [, duration] [, easing] [, complete] )

$(".navHome").click(function(event){
    // event.preventDefault(); // prevents the default action of the event
    $(this).animate({left:'190px'},"fast", function(){
        $(".content").animate({width:'700px', height:'250px'},"slow", function(){
            $(this).load("home.html", function(){
                $(".xIcon").animate({width:'20px', height:'20px'},"slow");
            })
        })
    });
});

Problem

I'm a superbeginner at JQuery but I really like to play with it. I was making a page and it started to get slow/glitchy and I don't how to use callbacks yet and I think it would help a lot. The code I'm using looks like this: ``` $(".navHome").click(function(){ var div=$(".navHome"); div.animate({left:'190px'},"fast"); var div=$(".content"); div.animate({width:'700px'},"slow"); div.animate({height:'250px'},"slow"); $(".content").load("home.html"); var div=$(".xIcon"); div.animate({width:'20px'},"slow"); div.animate({height:'20px'},"slow"); }); ``` So I click on a div "navHome", it moves and the "content" div expands/loads. But its starting to look choppy. I think callbacks are what I need but am not sure.

Original source