fadeIn（）delay（）とfadeOut（）の時間差

Question

コマンドライン（3）の開始時と終了時との時差を計算しようとしていますが、ゼロ。私はそれが6500（1500 + 3500 + 1500）を示すことを期待しています。 私を助けてください。

sd = new Date(); 
sdm = sd.getMilliseconds(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
ed = new Date(); 
edm = ed.getMilliseconds(); 
df = edm - sdm; 
document.getElementById('df').innerHTML = df; 

私はこの質問を投げていた理由は、私はスライドショー（非常に単純な）を書いていますし、それが一方から他方へジャンプして、それが適切に順番に画像を表示されていない、です。

これは私のHTMLとJSです。

$(document).ready(
     function() { 

      var i=0; 
      var imgs = $('#images ul').children(); 
      var j = imgs.length; 

      setInterval(function(){ runIt(); }, 6500); 

      function runIt() { 
       i = i + 1; 
       if (i == j) { i=0;} 

       $(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
      } 

    }); 

<div id="slider"> 
    <ul> 
     <li><img src="images/slider/s1.jpg" /></li> 
     <li><img src="images/slider/s2.jpg" /></li> 
     <li><img src="images/slider/s3.jpg" /></li> 
     <li><img src="images/slider/s4.jpg" /></li> 
    </ul> 
</div> 

ありがとうございます。

Answer 1

jQueryのアニメーション機能への呼び出しは非同期です。次のようにコールバック関数を使用する必要があります。

$(element).fadeOut(delay, 
    function() { 
     // callback action 
    } 
); 

ただし、これは期待どおりに機能しません。 getMillisecondsは、現在の時刻が20：18：20.430の場合など、秒の初めから経過したミリ秒を返します。代わりにgetTimeメソッドを使用します。 Unix Epochからのミリ秒数を返します。

document.getElementById'ingの代わりにjQueryを使用しているので、はるかに簡潔な$('#id').html('...');を使用できます。これで私たちは次のようになります：

sd = new Date(); 
sdm = sd.getTime(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500, 
    function() { 
     ed = new Date(); 
     edm = ed.getTime(); 
     df = edm - sdm; 
     $('#df').html(df); 
    } 
); 

あなたのスライドショーはおそらくこれによってもうんざりしています。

2番目のスニペットに関する小ニット：var imgs = $('#images ul').children();には、.children()メソッドがjQueryオブジェクトを返します。あなたは実際に$()を通してそれを実行する必要はありませんが、それがより明確であると考えることができます。

imgs.eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 

Answer 2

回答が見つかりました。それはIEとクロームで動作します。私はFFでチェックインしなかった。

$(document).ready(
    function() { 

     var i=0; 
     var imgs = $('#images ul').children(); 
     var j = imgs.length; 

     setInterval(function(){ runIt(); }, 5000); 

     function runIt() { 
      $(imgs).eq(i).fadeOut(1500) 
      i = i + 1; 
      if (i == j) { i=0;} 
      $(imgs).eq(i).fadeIn(1500); 
     } 

}); 

ご意見ありがとうございました&提案。この方法では、それは固まったり、イメージを保持しません。 フェリックス・クリングのフィドルを見て、イメージが消えて次のイメージが入ってきます。次のイメージをブレンドします。 もう一度ありがとうございます。