的setTimeout的Javascript/jQuery的

Question

我想測試是以防萬一循環一個淡入和淡出功能，具有不同的內容

var next = null; 
    var outer = $('.twitter'); 
    var current = outer.find('.twitterinner:first'); 
    current.fadeIn(); 
    function fade() { 
     if (current.next('div.twitterinner').length > 0) { 
      next = current.next('div.twitterinner'); 
     } else { 
      next = outer.find('div.twitterinner:first'); 
     } 

     current.fadeOut(500); 
     setTimeout(function(){ 
      next.FadeIn(500); 
     },1000); 
//  next.fadeIn(500); 
     current = next; 
     setTimeout(fade, 2000); 
    } 
    fade(); 

和HTML

<div class="col-xs-12 col-md-12 padding twitter">  
    <div class="twitterinner">Jellyfish Webdesign was afgelopen weekend aanwezig bij #YoutopiaArtsFestifal in het #Lloydhotel in A'dam! De website hebben we gesponsord.<br></div> 
    <div class="twitterinner">Laat uw email adres achter via http://t.co/MHUXpcY1NE om op de hoogte te blijven van onze nieuwe website release. #Jellyfishux<br></div> 
    <div class="twitterinner">Jellyfish Webdesign is vandaag officieel live gegaan! Voor meer informatie bezoek onze website, http://t.co/MHUXpcY1NE #jellyfishux<br></div>     
</div> 

如果我以後刪除setTimeout啓動時，它運行得很好（並且我再次包含了fadeIn），但是一旦我將setTimeout與淡入淡出函數一起添加，它就會停止工作。我似乎無法找到我出錯的地方。任何人都可以將我指向正確的方向嗎？

Answer 1

我認爲你必須使用setInterval()，而不是setTimeout()爲您的功能越來越調用repeatidly。請參閱下面的代碼

備註 - 請正確拼寫fadeIn(500)，它以小號f開頭。

var next = null; 
    var outer = $('.twitter'); 
    var current = outer.find('.twitterinner:first'); 
    current.fadeIn(); 
    function fade() { 
     if (current.next('div.twitterinner').length > 0) { 
      next = current.next('div.twitterinner'); 
     } else { 
      next = outer.find('div.twitterinner:first'); 
     } 

     current.fadeOut(500, function(){ 
      next.fadeIn(500); 
      current = next; 
     }); 
    } 
    setInterval(fade,2000); 

DEMO

Answer 2

如果你想要一個動畫後執行的東西，你可以做這樣的（鏈）

current.fadeOut(500, function() { 
    next.FadeIn(500); 
    current = next; 
}); 

要循環，我建議你到時間間隔，而不是使用的setTimeout的。

setInterval(fade, 2000); 

Answer 3

在 「淡入」， 「F」 應該是小

代碼：

setTimeout(function(){ 
     next.FadeIn(500); 
    },1000); 

實際代碼：

setTimeout(function(){ 
     next.fadeIn(500); 
    },1000); 

Answer 4

嘗試在使用setInterval

var i = 0; 

setInterval(function() { 
    $(".twitterinner").fadeOut("fast"); 
      $(".twitterinner").eq(i).fadeIn("slow"); 

    i++; 
    if(i == $(".twitterinner").length){ 
     i = 0; 
    } 


} ,1000); 

DEMO

Answer 5

您可以使用setInterval的，但如果你喜歡用的setTimeout來控制它，更好的是使用設置只是一個超時的同時，連鎖您的來電回調。

類似的東西：

function fade() { 
    if (current.next('div.twitterinner').length > 0) { 
     next = current.next('div.twitterinner'); 
    } 
    else { 
     next = outer.find('div.twitterinner:first'); 
    } 

    current.fadeOut(500, function() { 
     // executed after 500ms 
     next.delay(500).fadeIn(500, function() { 
      // executed after 500 + 500 +500 = 1500 ms; 
      current = next; 
      setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms. 
     }); 
    }); 
} 

，或者如果你想有一個更清晰的腳本來執行所有這一切，你可以定義一個函數的每一步（這是有用的，如果你的動畫變得更加複雜） ：

function fade() { 
    if (current.next('div.twitterinner').length > 0) { 
     next = current.next('div.twitterinner'); 
    } 
    else { 
     next = outer.find('div.twitterinner:first'); 
    } 

    current.fadeOut(500, step2); 

    function step2() { 
     // executed after 500ms 
     next.delay(500).fadeIn(500, step3); 
    } 

    function step3() { 
     // executed after 500 + 500 +500 = 1500 ms; 
     current = next; 
     setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms. 
    } 
}