淡出并多次替换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

回答

相关问题