使用jQuery fadeIn（）和fadeOut（）的正確方法是什么？

Question

我正在構建的東西可以淡入淡出一系列文本。

到目前為止，這是我的工作： http : //jsfiddle.net/9j7U6/

我正在淡入和淡出文本，但是看到渲染后的時間就到了。

$("#wantPlaceholder").fadeOut().html(wants[i]).fadeIn(2000).delay(3000);

正確的做法是什么？

Answer 1

使用回調。 動畫完成后，將調用回調。 以下代碼淡出了元素。 當其完全淡出時，將修改HTML，然后再次淡入。

$("#wantPlaceholder").fadeOut(1000, function(){
    $(this).html(wants[i]);
    $(this).fadeIn(2000);
});

編輯：嗯，循環可以完成這樣的事情 ：

(function myLoop(items, index) {
    index = (items.hasOwnProperty(index) ? index : 0);
    $("#wantPlaceholder").delay(3000).fadeOut(1000, function () {
        $(this).html(items[index]);
        $(this).fadeIn(1000, function () {
            myLoop(items, index + 1);
        });
    });
}(wants, 0));

Answer 2

首先，需要在fadeOut（）處理程序中更改文本

function rotateWants() {
    var i = 0;
    var wantsLength = wants.length;

    function fade() {
        $("#wantPlaceholder").delay(5000).fadeOut(function () {
            $(this).html(wants[i]);
            i++;
            if (i >= wantsLength) {
                i = 0
            };
        }).fadeIn(2000, fade);
    }

    fade();
}

演示： 小提琴