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);
});

编辑：好了，循环可以完成something like this：

(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();
}

演示：Fiddle

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

2 个答案: