JQuery画像ギャラリー非機能的なフェード効果

Question

ここでは、背景画像を使ってdivをフェードインまたはフェードアウトするための簡単な画像ギャラリースクリプトです。それは遅く、正しく動作しません。

• 間違っているものを、次のいずれか

  function gallery() { 
        timerp = window.setInterval(function() { 
         $('.cornerimg').fadeOut(2000); 
  
         if ($('.cornerimg:visible') == $('.cornerimg').last()) { 
          $('.cornerimg').first().fadeIn(2000); 
         } else { 
          $('.cornerimg').next().fadeIn(2000); 
         }; 
        }, 6000); 
       } 
  } 
  

に任意のアイデアを、各画像をフェードアウトする必要があり、すべての画像がこのギャラリーに登場し、任意のアニメーション

せずに一緒に消えていることを表示されますそれと？

Answer 1

next()セレクタの次の兄弟を見つけるだけです。あなたがどこにいるのかを把握していません。私はsetIntervalを実行し、それと一緒に現在のインデックスを渡します。たとえば、次のように

function gallery() { 
     ind = 0; 
     l = $('.cornerimg').length; 
     $('.cornerimg').fadeOut(500);   

     window.setInterval(function() { 
      if (ind > 0) $('.cornerimg').eq(ind-1).fadeOut(2000); 
      if (ind == l) { 
       ind = 0; 
      } 
      $('.cornerimg').eq(ind).fadeIn(500); 
      ind++; 
     }, 2000); 
} 

$(function() { gallery() }); 

代わりにそれらを非同期に起こることのfadeOutへのコールバックとしての機能を追加し、要素の移動を避けるために。

注：グローバル変数は一般的には最適な方法ではなく、アイデアを提供するためのものです。より良い形式は、setTimeoutでそれ自身を呼び出し、増分されたind引数を毎回渡す関数を持つことです。

未テスト。