0

jQuery アニメーションを単純化するにはどうすればよいですか? 最善の方法は何ですか？

コード：

$("#nav").animate({opacity:0.2},1000);
$("#sub_nav").animate({opacity:0.2},1000);
$("#user_links").animate({opacity:0.2},1000);
$("#logo").animate({opacity:0.2},1000);
$(".top_buttons").animate({opacity:0.2},1000);
$(".pageheaders").animate({opacity:0.2},1000);
$(".heading_sub_text").animate({opacity:0.2},1000);
$("#copyright").animate({opacity:0.2},1000);
$("#footer_links").animate({opacity:0.2},1000);
4

3 に答える 3

2

各要素にクラス (または追加のクラス) を与えます。

$('.someNewClass').animate({opacity:0.2},1000);

または、コンマで区切って、すべての要素を 1 つのセレクターに配置します。

$("#nav,#sub_nav,#user_links,#logo,.top_buttons,.pageheaders,.heading_sub_text,#copyright,#footer_links").animate({opacity:0.2},1000);

または、2 つの組み合わせで、現在クラスを持たないクラスだけを追加します。

// These get .someNewClass: #nav,#sub_nav,#user_links,#logo,#copyright,#footer_links
$(".someNewClass,.top_buttons,.pageheaders,.heading_sub_text").animate({opacity:0.2},1000);
于 2010-08-13T14:50:21.767 に答える
0

要素のグループをアニメーション化しているように見えるので、それらすべてを div でラップしてから、その div だけをアニメーション化できますか?

必要に応じて、jQuery Tools の Expose機能を確認することもできます。基本的に背景を暗くし、特定のオブジェクトを強調 (または露出) します。それが達成しようとしているものに似ている場合は、オーバーレイツールもあります。

于 2010-08-13T15:09:40.363 に答える
0

patrick dw が提案することは、jQuery コードを大幅にクリーンアップします。彼の提案の中で、私は最初の提案が最良だと思います。ただし、(見た目の改善よりも) セレクター/エフェクトの最適化を強調することがはるかに重要であることを強調します。

ただし、次のコードを検討してください。

var c = $('<div class="container" />').appendTo($('body'))
for(var i = 0; i < 1000; i++) {
  c.append($('<div />')
   .css('height', 30)
   .css('width', 30)
   .css('borderWidth', 2)
   .css('borderStyle', 'solid')
   .addClass('anim'))
}

これによりdiv.container、 のコピーが 1000 個作成され、div.animその中に配置されます。これを行い、 と のパフォーマンスを比較し$('.container').fadeOut()ます$('.anim').fadeOut()。含まれている div のアニメーション化は、その多くの子をアニメーション化するよりも桁違いに高速です。すべての子を同じ方法でアニメーション化する場合は、可能であれば常にラッパーをアニメーション化してください。

于 2010-08-13T15:17:48.470 に答える