4

我是 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展开/加载。但它开始看起来波涛汹涌。我认为回调是我需要的，但不确定。

4

3 回答 3

6

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

.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");
            })
        })
    });
});
于 2012-11-21T20:44:57.463 回答
1

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

它可能会变得不稳定，因为你有太多的事情要做...... 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");

});
于 2012-11-21T20:44:44.110 回答
0

试试这个：

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

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

于 2012-11-21T20:47:59.697 回答