淡入與jQuery

JSON AJAX名單上有以下滑塊：淡入與jQuery

https://jsfiddle.net/lucasmosele/px9ar93y/1/

我區間代碼如下：

var counter = 1; 
var elements = json.slider.length; 

// Set timer between quotes being visible 
$("#quotes li:first-child").addClass("active"); 
int = setInterval(function(){ 
     $("#quotes li:nth-child(" + counter + ")").removeClass("active"); 
     $("#quotes li:nth-child(" + counter + ")").next().addClass("active"); 
    if (counter === elements){ 
     counter = 1; 
    } else { 
     counter++; 
    } 
}, 3000);

我希望能有新的內容淡入，我試過.fadeIn：

$("#quotes li:nth-child(" + counter + ")").next().addClass("active").fadeIn("slow");

但我得到的行爲，我沒有必要一定要。我也嘗試在li和li.active之間創建css轉換，但出於某種原因，除非.fadeIn設置爲「slow」，否則不會顯示。

有沒有更乾淨的方法來做到這一點？

來源

2015-11-18 Lucas M

FYI：你有一個邏輯錯誤。第一個報價只顯示一次。每當你到達列表的最後，你都有一個沒有引號的框架，儘管這可能是需要的。 –

@DanielCook謝謝丹尼爾，我不想同時提出兩個問題。有沒有建議修復這個？我對JQuery/Javascript比較陌生，所以這是一個相當令人失望的過程。 –

你可以做

$("#quotes li:nth-child(" + counter + ")").next().hide().addClass("active").fadeIn("slow");

Play it here

來源

2015-11-18 17:39:00 void

我認爲這是你在尋找什麼：

$("#quotes li:first-child").addClass("active"); 
int = setInterval(function(){ 
     $("#quotes li:nth-child(" + counter + ")").fadeOut('slow', function() { 
     $("#quotes li:nth-child(" + counter + ")").next().fadeIn('slow'); 
     }); 
    if (counter === elements){ 
     counter = 1; 
    } else { 
     counter++; 
    } 
}, 3000);

這裏是的jsfiddle：https://jsfiddle.net/px9ar93y/6/

來源

2015-11-18 17:39:24

回答

相關問題