4

私はJQueryの初心者ですが、実際に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が展開/ロードされます。しかし、それは途切れ途切れに見え始めています。コールバックは私が必要としているものだと思いますが、よくわかりません。

4

3 に答える 3

6

同じスコープで変数を複数回定義しないでください。これはコールバック関数を使用したコードです。1 つのアニメーション メソッドを使用して複数のプロパティをアニメーション化できることに注意してください。

.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 に答える