Question

jQuery可以很容易地淡出/淡出文本。但是，如果您想将文本从一件事改为另一件，该怎么办？转换会发生这种情况吗？

示例：

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

可以将文本 Hello 更改为 World ，但是它会随着转换（如淡入淡出或某些效果）而改变而不是立即更改吗？

Answer 1

您可以使用回调，如下所示：

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

You can give it a try here，或者因为在这种特殊情况下队列的工作原理，如this：

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

这会在.text()完成后执行.fadeOut()来电，就在再次淡入之前。

Answer 2

如果你使用hide / show或fadeIn / fadeOut，你可能会遇到一些“跳跃”效果，因为它改变了CSS显示属性。我建议使用不透明的动画。

像这样：

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

Answer 3

这是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();

})();

效果很好。

Answer 4

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

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

Answer 5

在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);
});

Answer 6

文本淡入/淡出式幻灯片放映，用于在多个文本字符串之间循环播放，而无需使用 jQuery 淡入/淡出创建多个 html 元素（例如 li 或 div 的列表）。

当前答案有效。并感谢它。非常有帮助。这只是稍微扩展了它，增加了在同一个函数中按顺序淡入/淡出两个以上（多个）字符串的能力。我的用例是我正在使用一个刚性 CMS，我需要能够首先在屏幕上显示一个 h2 元素，然后依次淡入和淡出多个文本/字符串。最后一个字符串永远留在屏幕上。可能还有其他更好的方法来做到这一点，但这里有一个。

首先渲染一个 h2 元素以在 7.5 秒（7500 毫秒）的延迟后出现在屏幕上。然后，通过嵌套的淡入/淡出函数循环浏览 h2 中的多个文本字符串，该函数仅使用一个 html 元素，而不是像我见过的大多数示例中那样使用多个元素。这就像幻灯片放映。如前所述，我看到的大多数脚本都要求您拥有多个 html 元素的列表，例如li 或 div 的列表。这只是一个。

假设您有一个带有原始文本“原始文本”的 h2 元素。现在您想要淡入/淡出“辅助文本”。然后，在那之后，淡入“Tertiary Text”。

HTML

<h2>Original Text</h2>

查询

$(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);
          });
      });
});

您可以使用不同的延迟（）、文本（）和淡入/出（）的值来获得不同的文本显示时间以及它淡入的速度或速度或者出去等

“原始文本”将在您在 HTML/php 页面/文件中键入时显示。 “二级文本”、“三级文本”和函数中的任何后续字符串都由您看到 .text('the text') 的位置控制。只需替换我在那里的内容即可显示您自己的文本。

$(this) 只是重用原始对象的一种简写方式，在本例中为我们正在使用的 h2 元素。

我只是将函数命名为 a 和 b，但您可以随意省略或更改。

就这么简单。现在，如果您想添加第 4、第 5、第 n 个级别的字符串，您可以通过创建新孩子的父函数的新子函数来不断重复该过程。

如果您有任何其他创造性的方法来使用或改进原始答案，请告诉我。

谢谢。

Answer 7

我建议您使用basic slider jQuery plugin。非常轻量级（6k）并且可以满足您的需求，并且具有几个自定义选项，而不会出现大多数滑块插件的混乱。我一直都在使用它，它很棒。

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

7 个答案: