7

jquery 1.3 で一連のアイテムをアニメーション化し、次の各アイテムを最初のアニメーションの途中から開始したいと考えています。つまり、半待ち効果が欲しい。以下のコードを使用しようとしましたが、機能しません。誰にもアイデアはありますか？

    $("h3").click(function(){
      $(".projectItem").each(function (i) {
        if (i > 0){
            setTimeout ("", 500);
        }
        $(this).animate({"opacity": 0, "duration": 1000});
      });
    });

PS: さまざまな「アイドル」または「一時停止」jquery プラグインを使用しようとしましたが、使用された手法は jquery 1.3 よりも前のものではないでしょうか?

PPS: ご協力ありがとうございます :)

4

2 に答える 2

20

あなたはこのようなことを試すことができます：

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    // store the item around for use in the 'timeout' function
    var $item = $(this); 
    // execute this function sometime later:
    setTimeout(function() { 
      $item.animate({"opacity": 0}, 1000);
    }, 500*i);
    // each element should animate half a second after the last one.
  });
});

ここでの一般的な考え方は、リストを使用する.projectItemことです。アニメーションの開始をアイテムごとに500ミリ秒まで遅らせます。最初の項目（i=0）には0msの遅延があり、次のイベントループ中に（ほぼ）すぐに実行されます。他の各アイテムは、アイテムごとに500ミリ秒遅れます。また、アニメーションは1000ミリ秒続くため、最後のアイテムのアニメーションの約半分から開始されます。

于 2009-12-30T18:28:25.320 に答える
1

アニメーションを 2 つの部分 (不透明度 1 から 0.5、および 0.5 から 0) に分割し、通常のキューを使用する方が簡単だと思います (分割が可能な場合)。

このコードは、不透明度 1 から開始した場合です。

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){
      //... put here something in the half way ...
      $(this).animate({"opacity": 0, "duration": 500}); 
    });
  });
});
于 2009-12-30T18:23:31.980 に答える