使用 jQuery 淡化两个堆叠的文本答案

【问题标题】：Fade two stacked texts with jQuery使用 jQuery 淡化两个堆叠的文本
【发布时间】：2011-11-16 00:18:01
【问题描述】：

基于 JQuery fade with loop and delay 如何淡出两个文本行而不重叠？

我的 HTML：

<div id="div_1" style="position:fixed;top:0;left:0;"> aaa bbb ccc ddd eee </div>

<div id="div_2" style="position:fixed;top:0;left:0;"> 111 222 333 444 555 </div>

div_1先显示淡出，然后div_2淡入，再淡出，再div_1淡入，以此类推

【问题讨论】：

你能提供你正在使用的 HTML 吗？
将此作为对原始问题的编辑并将其格式化为代码以确保其正确显示。
类似<div id="div_1" style="position:fixed;top:0;left:0;"> aaa bbb ccc ddd eee </div> <div id="div_2" style="position:fixed;top:0;left:0;"> 111 222 333 444 555 div_1先显示淡出，然后div_2淡入，再淡出，然后div_1淡入，以此类推

标签： jquery text fade stacked

【解决方案1】：

也许它并不优雅，但很有效。

<script type="text/javascript">

function fade1() {
    $('#div1').delay(2000).fadeIn(2000).fadeOut(2000).delay(2000);
}
function fade2() {
    $('#div2').delay(2000).fadeIn(2000).fadeOut(2000).delay(2000);
}
function fade0() {
    $('#div2').fadeOut(0);
    $('#div2').delay(2000);
}
setInterval('fade1()', 1);
setInterval('fade2()', 1);
</script>

<body onload="fade0(); fade1(); fade2();">

【讨论】：

它在 Chrome-Mac 和 safari 中运行良好。在 FF7-Linux 和 Mac 中的行为是不同的，不是我们想要的。还发现一段时间后，在其他 Chorme 选项卡上工作并返回到我的测试选项卡时，行为发生了变化：两个 div 同时淡入和淡出，两者之间的延迟丢失了。

【解决方案2】：

您可以使用.add() 函数将两个要制作动画的对象连接在一起：

$('#div1').add($('#div2')).fadeToggle();

http://api.jquery.com/add/

【讨论】：

div_1先显示淡出，div_2隐藏，然后div_2淡入，再淡出，然后div_1淡入，以此类推
这是我的示例 jsfiddle.net/ATBDt/2 我在 Chrome Mac 中看到它很好。显示交替的淡入淡出文本而没有淡入淡出重叠。但是...我在第二个添加了评论。回答。
是的。但两者都是文本叠加，而不是在不同的行中。 jsfiddle.net/ATBDt/6这里的问题是我希望 div1 淡出为白色，然后立即 div2 淡入（不混合显示）
太棒了！我将时间减少到一半以使其类似于 ATBDt/2/。我已经在一些操作系统/浏览器中进行了测试，但没有发现问题。谢谢！
我已经编辑了答案并输入了您的 /13 代码，但我仍然看到旧的。复选标记已经是绿色的。