淡出并多次替换 div

Question

好的。所以我有一个 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);
});

Answer 1

你可以试试这个，

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>

Answer 2

试试这个递归函数

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>

淡出并多次替换 div

Fade out and replace a div multiple times

html

javascript

jquery

fadein