如何在JQuery中使用回调？

Question

我是JQuery的超级优秀者,但我真的很喜欢玩它.我正在制作一个页面,它开始变得缓慢/毛躁,我不知道如何使用回调,我认为它会有很大帮助.

我正在使用的代码如下所示:

$(".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");
});

所以我点击div"navHome",它移动,"content"div扩展/加载.但它开始看起来波涛汹涌.我认为回调是我需要的,但我不确定.

Answer 1

您不应该在同一范围内多次定义变量,这是使用回调函数的代码,请注意您可以使用一个animate方法为多个属性设置动画.

.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");
            })
        })
    });
});