jQuery 显然可以轻松淡入/淡出文本。但是，如果您想将文本从一件事更改为另一件事怎么办？过渡会发生这种情况吗？
例子：
<div id='container'>Hello</div>
是否可以将文本 Hello 更改为 World，但让它随着过渡（如淡入淡出或某种效果）而不是立即改变而改变？
【问题讨论】：
标签： jquery
你可以像这样使用回调：
$("#container").fadeOut(function() {
$(this).text("World").fadeIn();
});
You can give it a try here，或者因为在这种特殊情况下队列的工作方式，例如this：
$("#container").fadeOut(function() {
$(this).text("World")
}).fadeIn();
这会在.fadeOut() 完成时执行.text() 调用，就在再次淡入之前。
【讨论】：
position:absolute; 来处理跳跃问题：)
如果您使用 hide/show 或 fadeIn/fadeOut，您可能会遇到一些“跳跃”效果，因为它会更改 CSS 显示属性。我建议使用不透明的动画。
像这样：
$('#container').animate({'opacity': 0}, 1000, function () {
$(this).text('new text');
}).animate({'opacity': 1}, 1000);
【讨论】：
这是live example。
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
效果很好。
【讨论】：
eq 在给定索引处获取报价。 % 是余数运算符。它给出了quoteIndex/length 的余数。这是一种确保索引总是上升一个的简单方法，但如果它大于列表，则循环回 0。重复实际上发生了，因为最后一个淡出在完成时再次调用showNextQuote。
我能想到的一种方法是让子元素带有文本并只显示一个开始，然后一个接一个地淡化其他元素。
【讨论】：
对this menu 上的文本和颜色更改、过渡速度以及 mouseenter、mouseleave 事件使用数组查找 像这样：
$('#id a').mouseenter(function() {
$(this).fadeOut(
eSpeed, function() {
$(this).text(sayThis[0]);
$(this).css({
color: eColor
});
}).fadeIn(eSpeed);
});
$('#id a').mouseleave(function() {
$(this).fadeOut(
eSpeed, function() {
$(this).text(sayThat[0]);
$(this).css({
color: lColor
});
}).fadeIn(eSpeed);
});
【讨论】：
Text FadeIn/FadeOut-esque 幻灯片放映，用于循环浏览多个文本字符串，而无需使用 jQuery FadeIn/FadeOut 创建多个 html 元素（例如 li 或 div 的列表）。
当前答案有效。并感谢它。非常有帮助。这只是对其进行了一点扩展，增加了在同一个函数中依次淡入/淡出两个（多个）字符串的能力。我的用例是我正在使用一个刚性 CMS，我需要能够首先在屏幕上显示一个 h2 元素，然后依次淡入和淡出多个文本/字符串。最后一个字符串永远留在屏幕上。可能还有其他更好的方法，但这里有一个。
在延迟 7.5 秒（7500 毫秒）后，首先渲染一个 h2 元素以显示在屏幕上。然后，通过嵌套的 fadeIn/fadeOut 函数循环遍历 h2 中的多个文本字符串，该函数仅使用一个 html 元素，而不是像我见过的大多数示例中那样使用多个元素。就像幻灯片放映一样。如前所述，我看到的大多数脚本都要求您拥有多个 html 元素的列表，例如li 或 div 的列表。这只是一个。
假设您有一个带有原始文本“原始文本”的 h2 元素。现在您要淡入/淡出“辅助文本”。然后，在那之后，淡入“第三文本”。
HTML
<h2>Original Text</h2>
JQUERY
$(document).ready(function(){
var my_h2 = $("h2");
my_h2.delay(7500).fadeIn(1000,
function a() {
$(this).text('Secondary Text.').delay(7500).fadeIn(3000,
function b() {
$(this).text('Tertiary Text.').delay(7500).fadeIn(3000);
});
});
});
您可以使用不同的 delay()'s、text()'s 和 fadeIn/Out()'s 的值来获得文本显示的不同时间以及淡入的快慢或出等。
“原始文本”将在您在 HTML/php 页面/文件中键入时出现。函数中的“次要文本”、“第三次文本”和任何后续字符串都由您看到 .text('the text') 的位置控制。只需替换我那里的内容即可显示您自己的文字。
$(this) 只是重用原始对象的简写方式，在本例中是我们正在使用的 h2 元素。
我将函数 a 和 b 命名为示例，但您可以随意省略或更改。
就这么简单。现在，如果您想添加第 4、第 5、第 n 级字符串，您可以通过创建新子函数的父函数的新子函数来不断重复该过程。
如果您有任何其他创造性的方式来使用原始答案或改进它，请告诉我。
谢谢。
【讨论】：