2

だから私は小さな間隔でいくつかのクラスを切り替えて削除するだけです-私はJSとJQueryにかなり慣れていませんが、これを実行しました。これは機能します：

function priceTable() {
    setTimeout(function(){$("#price-table-1").toggleClass("price-table-highlight");  },1000);
    setTimeout(function(){$("#price-table-1").removeClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").toggleClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").removeClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").toggleClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").removeClass("price-table-highlight");  },4000); 
}

しかし、非常に多くの繰り返しがあるようです-これを行うためのより良い方法はありますか？

4

5 に答える 5

0

青/黒の色の交換に制限がない場合は、jQuerys pulsate（ドキュメントはここにあります）の効果を使用します。

function priceTable() {
  $("#price-table-1").effect("pulsate", { times:3 }, 2000);
  $("#price-table-2").effect("pulsate", { times:3 }, 2000);
  $("#price-table-3").effect("pulsate", { times:3 }, 2000);
}

これの唯一の欠点：それは要素全体を脈動させます。したがって、上記とまったく同じように上記を使用しないことをお勧めします（＃price-tables内のすべてのテキストもフェードインおよびフェードアウトするため）。
脈動が行うことは、それが適用される要素の不透明度を脈動させることです。したがって、たとえば、空のdivと適切な背景色で価格表を下に置くことができます。

于 2012-11-21T21:26:47.290 に答える
0 
function priceTable() {
    var table_count = 3;

    for(var i = 0; i < table_count; i++) {
        // jQuery
        $('#price-table-' + i).delay(1000)
                              .animate({ "background-color": "blue" })
                              .delay(1000)
                              .animate({ "background-color": "black" });

        // jQuery UI (http://api.jqueryui.com/addClass/)
        $('#price-table-' + i).delay(1000)
                              .addClass("price-table-highlight", 0) // 0 is important
                              .delay(1000)
                              .removeClass("price-table-highlight");

    }
}
于 2012-11-21T21:13:47.903 に答える
0

単純な反復を使用して、ID識別子を乾燥させることができます。

timer = 1000;
for( pricetableindex = 1; pricetableindex <=3; pricetableindex++ ){
    .....unction(){$("#price-table-"+pricetableindex).toggle...  ), timer);
    .....unction(){$("#price-table-"+pricetableindex).remove...  ), timer+=1000);

これは、オブジェクトメンバーにアクセスするための重複した構文、ドット構文、および配列表記を使用する場合の主なセールスポイントです。

obj.member1 syntax does not allow this kind of manipulation, while 
obj["member1"] does.
于 2012-11-21T21:13:10.527 に答える
0

jQueryのanimate関数とdelay関数の組み合わせをチェックして、結果を得ることができます。

jQuery UIプラグイン（すでに使用している可能性がありますか？toggleClassはそのメソッドの1つですが、jQueryコアに存在し、jQuery-UIで拡張されていると思います）は、クラス全体をアニメーション化することもできます。これは次のようになります。

function priceTable() {
    $("#price-table-1").toggleClass("price-table-highlight",1).delay(1000).toggleClass("price-table-highlight", 1);
}

追加のライブラリ全体が必要になるため、厳密には「より効率的」ではありませんが、確かにコードは少なくなります。呼び出しでアニメーションキューを開始できるかどうか、またはおよびid要素.delayでアニメーションを開始するためにタイムアウト関数を設定する必要があるかどうかはわかりません。price-table-23

于 2012-11-21T21:33:01.800 に答える
0

jQueryアニメーションメソッドの場合、delayメソッドの使用は正常に機能します。他のjQueryメソッドについては、jquery.waitdelayをお勧めします。これは、すべてのjQueryメソッドと同様に機能します。その後、コードは次のようになります

function priceTable() {
  $('#price-table-1').wait(1000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(2000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(3000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
}
于 2012-11-22T05:09:19.860 に答える