JQuery text fade/переход из одного текста в другой?

jQuery может быть легко fadeIn/fadeOut легко. Но что, если вы хотите изменить текст из одной вещи в другую? Может ли это произойти с переходом?

Пример:

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

Можно ли изменить текст Hello to World, но изменить его с переходом (например, затуханием или каким-то эффектом) вместо мгновенного изменения?

Ответы

Ответ 1

Вы можете использовать обратные вызовы, например:

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

Вы можете попробовать здесь или из-за того, как очередь работает в этом конкретном случае, например this:

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

Выполняет вызов .text(), когда .fadeOut() полностью, перед тем, как снова затухать.

Ответ 2

Если вы будете использовать hide/show или fadeIn/fadeOut, вы можете столкнуться с каким-то "прыгающим" эффектом, потому что он изменяет свойство отображения CSS. Я бы предложил использовать анимацию с непрозрачностью.

Вот так:

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

Ответ 3

Вот живой пример.

(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();

Хорошо работает.

Ответ 4

В один прекрасный момент я могу подумать, что для этого нужно иметь дочерние элементы с текстом и показать только один, чтобы начать, а затем затушить другие в одном за другим.

смотрите здесь: http://jsfiddle.net/VU4CQ/

Ответ 5

Использование поиска массивов для изменения текста и цвета, скорости перехода и мыши, событий 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);
});

Ответ 6

Я предлагаю вам использовать основной плагин jQuery слайдера. Очень легкий (6k) и делает то, что вы хотите, и имеет пару вариантов настройки без всякого беспорядка большинства плагинов слайдера. Я использую его все время, и это здорово.