jQuery Array fadeIn не работает

Question

Я пытаюсь fadeIn элементы fadeOut в массиве в div.Я пытаюсь заставить эту работу постепенно исчезать.Таким образом, первый элемент исчезает в течение 3 секунд, затем исчезает снова, затем следующий элемент исчезает, 3seocnds затем исчезает и так далее ... почему не так с моим кодом.Чек http://jsfiddle.net/Fpu2E/1/

Answer 1

Код, который вы используете, не будет работать по разным причинам - нулевая задержка между вызовами fadeOut и fadeIn означает, что вы не получите 3-секундную задержку, которую вы ищете между исчезновением и исчезновением, и что вызов обеих функций приводит к некоторым странным эффектам в очереди эффектов jQuery.

Лучшим вариантом было бы использовать рекурсивную функцию вместе с delay, чтобы сделать это:

var div = $('div').hide(),
    news = ['news1', 'news2', 'news3'],
    count = 0;

function changeNews() {
    div.fadeIn(3000).delay(3000).fadeOut(3000, function() {
        changeNews();
    }).text(news[count++]);
}

changeNews();

Простую демонстрацию этого можно найти здесь: http://jsfiddle.net/Fpu2E/4/

Answer 2

Это работает ...

var news = ['news1', 'news2', 'news3'],
    count = news.length,
    currentItem = 0;

showNextItem = function() {

    $('div').text(news[currentItem++]).fadeIn(3000, function() {
        var element = $(this);
        setTimeout(function() {
            element.fadeOut(1000, function() {
                if (currentItem < count) {
                    showNextItem();
                }
            });

        }, 3000);
    });

};

showNextItem();

jsFiddle .