淡出並多次替換div

好的。所以我有一個div，我想出瞭如何淡出它，並用特定的文本替換它。淡出並多次替換div

但是，我希望淡入淡出的第二個文本和第三個淡入淡出。之後，我想第四個div替換第三個等等。

我該如何去做到這一點？

<div id="foo">test</div> 

$('#foo').delay(5000).fadeOut("slow", function(){ 
var div = $("<div id='foo'>test2</div>").hide(); 
$(this).replaceWith(div); 
$('#foo').fadeIn(500); 
});

來源

2016-11-05 Arun O

試試這個遞歸函數

function fadeMessages(arr) { 
 
    if (arr.length == 0) return; 
 
    $('#foo').fadeOut("slow", function(){ 
 
     $("#foo").html(arr[0]).hide().fadeIn("slow", function() { 
 
      arr.shift(); 
 
      fadeMessages(arr); 
 
     }); 
 
    }); 
 
} 
 

 
fadeMessages(["good", "morning", "to", "everyone", "<img src='https://38.media.tumblr.com/avatar_4892c96bf7cb_128.png'><br><button> OK </button>"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="foo">test</div>

來源

2016-11-05 08:04:11 elfan

以上的更新代碼如果我想讓最後一部分包含一個圖像和一個按鈕，我怎麼能實現這一點？您的解決方案適用於文本，但我應該在問題中更清楚。 –

我更新了答案，包括一個圖像一個按鈕（基本上任何你想要的html），並刪除不必要的''無效div ='（感謝指出它@Dmitriy Demir） – elfan

乾杯。感謝您提供這種高效解決方案。讓我開始關於遞歸函數的教程系列！ –

你可以試試這個，

function changeHtml(html, callback) { 
 

 
$('#foo').fadeOut("slow", function(){ 
 
    $(this).html(html); 
 
    $(this).fadeIn("slow", callback); 
 
}); 
 
    
 
} 
 

 
changeHtml('test2', function() { 
 
    changeHtml('test3', function() { 
 
    changeHtml('<img src=""/>', function() { 
 
    
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo">test</div>

來源

2016-11-05 08:00:09 Aruna

我想用一些更多的文本替換test2，然後我想用圖像替換該文本，並且該圖像將成爲保留在屏幕上的最終div。我不確定我能達到那個目標。 –

@ArunO你可以試試 – Aruna

淡出並多次替換div

回答

相關問題