jQuery文本淡入淡出/从一个文本转换到另一个？

jQuery可以很容易地淡入淡出文本。 但是如果你想把文本从一个东西改变到另一个呢？ 这可以发生在一个过渡？

例：

<div id='container'>Hello</div> 

你可以改变文字你好 世界，但它有一个转变（如淡入淡出或一些效果），而不是立即改变？

Answer 1

您可以使用callback，如下所示：

 $("#container").fadeOut(function() { $(this).text("World").fadeIn(); }); 

你可以在这里试一下 ，或者因为队列在这种特殊情况下的工作方式如下：

 $("#container").fadeOut(function() { $(this).text("World") }).fadeIn(); 

这会在.fadeOut()完成时执行.text()调用，就在再次淡入之前。

Answer 2

如果您使用hide / show或fadeIn / fadeOut，您可能会遇到一些“跳跃”效果，因为它会更改CSS显示属性。 我会build议使用带有不透明度的animation。

喜欢这个：

 $('#container').animate({'opacity': 0}, 1000, function () { $(this).text('new text'); }).animate({'opacity': 1}, 1000); 

Answer 3

这是一个生动的例子 。

 (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); 

它运作良好。

Answer 4

我能想到的一个方法就是让子元素带有文本，只显示一个元素，然后逐一淡入其他元素。

看看这里： http : //jsfiddle.net/VU4CQ/

Answer 5

在这个菜单上使用数组查找文本和颜色的变化，转换速度和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); }); 

Answer 6

我会build议你使用基本的滑块jQuery插件 。 非常轻量级（6K），并做你想要的，并有几个定制选项，没有大部分滑块插件的混乱。 我一直使用它，这很好。