如何在 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”，它移动并且“内容”div 展开/加载。但它开始看起来波涛汹涌。我认为回调是我需要的，但不确定。

Answer 1

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

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

Answer 2

回调可能不是您想要的，因为您的动画会“排队”，一个接一个。

它可能会变得不稳定，因为你有太多的事情要做...... javascript css 动画并不是特别快，并且由于 javascript 引擎的差异而很大程度上依赖于浏览器。如果您正在寻找更流畅的动画，我建议您添加和删除应用了 CSS 转换的类，因为 CSS 是硬件加速的，并且不会占用宝贵的 javascript 资源，让您的应用程序的其余部分运行得更流畅。

附带说明，您不需要每次都使用 var 关键字重新声明 div，您还可以通过逗号分隔对象属性并链接您的 jQuery 方法来为多个属性设置动画，这样您就不需要必须重新查询 DOM，像这样：

$(".navHome").click(function(){

  $(this).animate({left:'190px'},"fast");

  $(".content").animate({width:'700px', height:'250px'},"slow")
               .load("home.html");

  $(".xIcon").animate({width:'20px', height:'20px'},"slow");

});

Answer 3

试试这个：

$(".navHome").click(function(){

$(this).animate({left:'190px'},"fast");

$(".content")
.animate({width:'700px'},"slow");
.animate({height:'250px'},"slow");

$(this).load("home.html");

$(".xIcon")
.animate({width:'20px'},"slow");
.animate({height:'20px'},"slow");
});

看看语法 - 你应该重构你的代码，让它更容易！