jquery。每個使用。隊列？

Question

我有jQuery中的代碼：

function lshow() { 
     var delayt = 500; 
     var showtime = 5000; 
     var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm']; 
     var i=0; 

     $.each(ArrayOfElements,function (i,element) { 
      if($(element).is(':visible')) { 
       $(element).delay(delayt).hide('slow'); 
      } 
      if ($(element).is(':hidden')) { 
       $(element).delay(showtime).show('slow'); 
      } 

     }); 
    } 

和HTML：

<span class="slogan"> 
    <span class="slogan1">my slogan</span><!--Default visible--> 
     <span class="whatwedo"><!--Default invisible--> 
      projects <span class="sm">and modernization </span> of something <span class="ekon">fine</span> 
     <span class="ene">fast</span> 
     <span class="ekol">smooth</span> 
    </span> 
</span> 

CSS：

.whatwedo, .sm, .ene, .ekol { 
    display: none; 
} 

我想設置它看起來像：

1. 我的口號是

淡出的東西細

「精」 淡出

1. 項目 「快」 淡入
   1. 的東西快速項目

   同樣的事情

   1. 東西smoth的東西

2. 項目和現代化，但5秒鐘後項目。它顯示 「項目和一些精細快速smoth現代化」 ，我不能得到它的工作

Answer 1

試試這個http://jsfiddle.net/Kt38f/

$(document).ready(function() { 
    var delayt = 500; 
    var showtime = 5000; 
    var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm']; 
    var i=0; 

      $('.slogan1').fadeOut(delayt, function(){   
       $(".whatwedo").fadeIn(showtime , function(){ 
        $('.ekon').fadeOut(showtime , function(){ 
         $('.ene').fadeIn(showtime, function(){ 
          $('.ene').fadeOut(showtime, function(){ 
           $('.ekol').fadeIn(showtime, function(){ 
            $('.sm').fadeIn(showtime); 
           }); 
          }); 
         }); 
        }); 
       }); 
      });   
}); 

Answer 2

這裏是另一種方式：

而不是投入的要素array，你把函數應該在一個數組中執行並使用它來處理它：setTimeout：

function lshow() { 
    var intv = 5000; 
    var funcs = [ 
     function() { 
      $('.slogan1').hide('slow'); 
      $('.whatwedo').show('slow'); 
     }, 
     function() { 
      $('.ekon').hide('slow'); 
      $('.ene').show('slow'); 
     }, 
     function() { 
      $('.ene').hide('slow'); 
      $('.ekol').show('slow'); 
     }, 
     function() { 
      $('.sm').show('slow'); 
     } 
    ]; 
    var i = 0; 

    setTimeout(function() { 
     var func = funcs[i]; 
     if(func) { 
      i++; 
      func(); 
      setTimeout(arguments.callee, intv); 
     } 
    }, intv); 
} 

DEMO

Answer 3

我採取了不同的方法一點點吧。小提琴@http://jsfiddle.net/SinS3i/xwc9a/1/

var currentStep = false; 
var t = false; 
ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm']; 
var delayt = 500; 
var showtime = 5000; 
lshow = function(elements) { 
    var lastStep = currentStep; 
    currentStep = elements.shift(); 
    var hideIt = lastStep ? $(lastStep).has(currentStep).length === 0 : false; 
    if(hideIt) { 
     $(lastStep).fadeOut(showtime, function() { 
      $(currentStep).fadeIn(showtime, function() { 
       t = ArrayOfElements.length > 0 ? setTimeout("lshow(ArrayOfElements)", delayt) : false;      
      }); 
     }); 
    } else { 
     $(currentStep).fadeIn(showtime, function() { 
      t = ArrayOfElements.length > 0 ? setTimeout("lshow(ArrayOfElements)", delayt) : false; 
     }); 
    } 
}; 
$(document).ready(function(){ 
    t = setTimeout("lshow(ArrayOfElements)", delayt); 
}); 

Answer 4

點點編輯（http://jsfiddle.net/dVJvc/)：

編輯：對不起，我沒有看到你的反應（的代碼是像上次一樣ShankarSangoli）