位置をアニメーションでフェードイン＆アウト - これを書き込むためのより良い方法は？

Question

次のような記述方法がありますか？

$(function(){  
    $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow") 
    $('.start-here-notice').animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000);   
}); 

これはうまくいきますが、これを書くにはもっと効率的な方法があると思います。もしそうなら、私はおそらくそれをもう2回アニメーション化するでしょう。

ここで何か助けを借りていただければ幸いです。

ありがとうございます！

Answer 1

• あなたがオブジェクトの上に好きなようにあなたはそれらを連結すること、など多くのjQueryのメソッドを呼び出すことができます。idで要素にアクセスする

  $(function(){  
      $('.start-here-notice') 
       .fadeIn(1000) 
       .animate({"left":"-155px"}, "slow") 
       .animate({"left":"-165px"}, "slow") 
       .delay(5000) 
       .fadeOut(1000);   
  }); 
  

• は、クラスでそれをアクセスするよりも若干速いです。 （この場合、一度しか行っていないので、その違いは自明です）

• 同じ要素をもう一度使用する場合は、$('.start-here-notice')の結果を変数に格納することがありますあなたは一度それを見なければなりません。また、jQueryオブジェクトを多数回使用した場合（多数の要素を扱う場合など）、または頻繁に発生するイベントハンドラのように、jQueryオブジェクトを格納することによるメリットが見えるようになります繰り返し）。

Answer 2

この

$(function(){  
    $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow", function(){ 
     $(this).animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000); 
    }); 
}); 

は...頭に浮かぶ。それからもう一度、それはおそらく重要ではない。

Answer 3

私がすぐに飛び出すのは、jqueryの参照を変数に設定することだけです。

var startHereNotice = $('.start-here-notice'); 
startHereNotice.fadeIn(1000)... 

Answer 4

あなたは

$('.start-here-notice').animate({"left":"-155px", "opacity":1}, "slow") 
$('.start-here-notice').animate({"left":"-155px", "opacity":0}, "slow") 

をアニメーションしかし、世話をするために、同じ呼び出しで不透明度をアニメーション化することができ、不透明度は完全にIE6とIE7にsuportedされていません。代わりにアルファフィルタを使用してください

EDIT：さて、2番目の呼び出しは、fadeOutを遅延させたい場合、実装は問題ありません。 delay（）は行く方法です。

Answer 5

jQueryでクラスベースの要素を定義するには、find関数を使用するのが最も効率的です。また、html要素の型も含めることができます。

現在持っている：

$('.start-here-notice') 

あなたはこのような何かを行うことを検討すべきである（仮定.start-ここでは、予告DIVである）あなたは最小限を持っている場合

$('#parent').find('div.start-here-notice') 

は、明確にするにはページ上のDOM要素の量を適度にしてJavaScriptを制限すると、ほとんどの場合速度の向上に気付かないでしょう。これは単に最も効率的な方法です。