jQuery 文本从一种文本淡入淡出/过渡到另一种文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3670487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery text fade/transition from one text to another?
提问by Jake Wilson
jQuery can obviously fadeIn/fadeOut text easily. But what if you want to change the text from one thing to another? Can this happen with a transition?
jQuery 显然可以轻松地淡入/淡出文本。但是，如果您想将文本从一件事更改为另一件事怎么办？过渡会发生这种情况吗？
Example:
例子：
<div id='container'>Hello</div>
Can one change the text Helloto Worldbut have it change with a transition (like a fade or some effect) instead of changing instantly?
是否可以将文本Helloto World更改为通过过渡（如淡入淡出或某些效果）而不是立即更改？
回答by Nick Craver
You can use callbacks, like this:
您可以使用回调，如下所示：
$("#container").fadeOut(function() {
$(this).text("World").fadeIn();
});
You can give it a try here, or because of how the queue works in this particular case, like this:
您可以在这里尝试一下，或者因为队列在这种特殊情况下的工作方式，如下所示：
$("#container").fadeOut(function() {
$(this).text("World")
}).fadeIn();
This executes the .text()call when the .fadeOut()is complete, just before fading in again.
这将.text()在.fadeOut()完成时执行调用，就在再次淡入之前。
回答by Viktor Stískala
If you'll use hide/show or fadeIn/fadeOut you may encounter some "jumping" effect, because it changes CSS display property. I would suggest using animate with opacity.
如果您将使用 hide/show 或fadeIn/fadeOut，您可能会遇到一些“跳跃”效果，因为它会更改 CSS 显示属性。我建议使用不透明的动画。
Like this:
像这样：
$('#container').animate({'opacity': 0}, 1000, function () {
$(this).text('new text');
}).animate({'opacity': 1}, 1000);
回答by Bogdan
Here is a 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();
})();
It works well.
它运作良好。
回答by Moin Zaman
one way I can think of to do this is to have child elements with text and show only one to begin with, then fade the other ones in one after another.
我能想到的一种方法是使用带有文本的子元素并只显示一个开始，然后一个接一个地淡出其他元素。
have a look here: http://jsfiddle.net/VU4CQ/
看看这里：http: //jsfiddle.net/VU4CQ/
回答by Kiernan Burke
Using array lookups for text and color change, transition speed, and mouseenter, mouseleave events on this menulike this:
使用数组查找文本和颜色更改、转换速度和 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);
});
回答by Primoz Rome
I would suggest you use basic slider jQuery plugin. Very lightweight (6k) and does what you want and has couple of customization options without all the clutter of most slider plugins. I use it all the time and it's great.
我建议你使用基本的滑块 jQuery 插件。非常轻巧（6k），可以做你想做的事，并且有几个自定义选项，没有大多数滑块插件的所有混乱。我一直在使用它，它很棒。
