在jquery中優化這個循環

Question

我需要優化下面的代碼。嘗試使用FOR，但圖像一次顯示。

使用以下解決方案，但未優化。

$(document).ready(function(){ 



function fadeInOut() { 

    var $element1 = $('a#imagem01'); 
    var $element2 = $('a#imagem02'); 
    var $element3 = $('a#imagem03'); 
    var $element4 = $('a#imagem04'); 
    var $element5 = $('a#imagem05'); 
    var $element6 = $('a#imagem06'); 



    $element1.fadeIn(2000, function() { 
    $element1.fadeOut(2000, function() { 

    $element2.fadeIn(2000, function() { 
    $element2.fadeOut(2000, function() { 


    $element3.fadeIn(2000, function() { 
    $element3.fadeOut(2000, function() { 


    $element4.fadeIn(2000, function() { 
    $element4.fadeOut(2000, function() { 

    $element5.fadeIn(2000, function() { 
    $element5.fadeOut(2000, function() { 

    $element6.fadeIn(2000, function() { 
    $element6.fadeOut(2000, function() { 

    fadeInOut(); 

    });});});});});});});});});});});}); 

    } 

    fadeInOut(); 

}); 

我需要幫助請！

Answer 1

$(document).ready(function() { 
    $("div").hide(); 
    var obj = [$("#o1"), $("#o2"), $("#o3"), $("#o4"), $("#o5")]; 
    var i = 0; 
    var interval = setInterval(function() { 
      obj[i].fadeIn(2000); 
      obj[i].fadeOut(2000); 
      i++; 
      if (i > 4) { 
       clearInterval(interval) 
      } 
     }, 
     4000 
    ); 
}); 

我敢肯定上面的解決方案是更好的，但this would work too ..

Answer 2

function fadeInOut() { 
    var elements = ['a#imagem01', 'a#imagem02', 'a#imagem03', 'a#imagem04', 'a#imagem05', 'a#imagem06']; 
    var index = 0; 
    var loopForever = false; 

    (function() { 
     var selfFunction = arguments.callee; 
     if((loopForever) && (index > elements.length-1)) index = 0; 

     if(index <= elements.length-1) { 
      $(elements[index++]).fadeIn(2000, function() { 
       $(this).fadeOut(2000, selfFunction); 
      }); 
     } 
    })(); 
} 

未經測試，但沿着這些線應該做的伎倆。它基本上是一個遍歷所有元素的回調循環。