Возникли проблемы с некоторыми setInterval + JQuery FadeIn / FadeOut

Question

Я пытаюсь добавить / удалить текст внутри div. Я сохранил время ДЕЙСТВИТЕЛЬНО быстро для целей отладки. Проблема в том, что я думаю, что исчезновение и борьба борются друг с другом. Иногда текст обновляется, а затем он исчезает / исчезает ...

Смотрите этот интерактивный пример на jsFiddle

вот код:

var tips = [
    'AAA',
    'BBB',
    'CCC'
];

var currentTipIndex = 0;
setInterval(function () {
    currentTipIndex++;
    if (currentTipIndex >= tips.length) {
        currentTipIndex = 0;
    }
    $("#pewpew").fadeOut(1000);
    $("#pewpew").html(tips[currentTipIndex]);
    $("#pewpew").fadeIn(1000);
}, 1 * 5 * 1000);​

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

Может кто-нибудь помочь?

Answer 1

Обновление:

// Rotating Tips.
var tips = ['AAA', 'BBB', 'CCC'];

var currentTipIndex = 0;

function recursiveTimeout() {
    setTimeout(function () {
        currentTipIndex++;
        if (currentTipIndex >= tips.length) {
            currentTipIndex = 0;
        }
        $("#pewpew").fadeOut(1000, function () {
            $("#pewpew").html(tips[currentTipIndex]);
        });

        $("#pewpew").fadeIn(1000, recursiveTimeout());
    }, 1 * 5 * 1000);

};
recursiveTimeout();

Использование обратного вызова fadeOut обеспечивает завершение анимации перед загрузкой контента. Затем создание рекурсивного обратного вызова в пределах fadeIn запускает таймер после его завершения.

Обновленная скрипка: http://jsfiddle.net/ZCadu/2/.

Answer 2

Попробуйте это,

var tips = [
    'AAA',
    'BBB',
    'CCC'
];

function fadeIn(html) {
    $("#pewpew").html(html);
    $("#pewpew").fadeIn(1000, function() {
        $("#pewpew").fadeOut(1000, getNextTip);
    });
}

var currentTipIndex = 0;
function getNextTip() {
    if (currentTipIndex >= tips.length)
        currentTipIndex = 0;

    var cTip = tips[currentTipIndex];
    fadeIn(cTip);

    currentTipIndex++;
}

$(function() {
    getNextTip();
});
​