jQuery текст исчезает / переход от одного текста к другому?

Question

jQuery текст исчезает / переход от одного текста к другому?

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

пример:

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

можно ли изменить текст Привет до мир но он меняется с переходом (например, исчезает или какой-то эффект) вместо того, чтобы мгновенно меняться?

368 6

jQuery

6 ответов:

Comments

Ничего не найдено.

Nick Craver · Accepted Answer · 2010-09-08 20:46:20

вы можете использовать обратные вызовы, как это:
$("#container").fadeOut(function() {
  $(this).text("World").fadeIn();
});
вы можете попробовать здесь, или из-за того, как очередь работает в данном конкретном случае, например этой:
$("#container").fadeOut(function() {
  $(this).text("World")
}).fadeIn();
Это выполняет .text() вызов .fadeOut() завершено, прежде чем снова выцветания.

Viktor Stískala · Accepted Answer · 2010-09-08 21:01:55

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

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

Bogdan · Accepted Answer · 2013-06-09 02:24:24

здесь видео.

(function() {

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

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

showNextQuote();

})();

Он работает хорошо.

Moin Zaman · Accepted Answer · 2010-09-08 21:06:08

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

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

Kiernan Burke · Accepted Answer · 2012-05-31 03:55:29

С помощью поиска массива для изменения текста и цвета, скорости перехода и 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);
});

Primoz Rome · Accepted Answer · 2014-01-05 15:41:38

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