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（属性 [，持续时间] [，缓解] [，完成]）

$(".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资源，允许你的应用程序的其余部分运行得更顺畅。

作为旁注，每次使用div关键字时都不需要重新声明var，也可以通过逗号分隔对象属性并链接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");
});

查看语法 - 您应该重新编写代码并使其更容易！

如何在JQuery中使用回调？

3 个答案: