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

试试这个递归函数

＆＃13;

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>"]);

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个，

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>

淡出并多次替换div

2 个答案: