javascript - 如何在 jQuery 中的两个 HTML 片段之间淡入淡出

Question

http://jsfiddle.net/SVtJV/16/

$( document ).ready(function() {
    for (var i=0; i<3; i++) {
        setTimeout(function() {
            $("#footer-address").fadeOut(400);
        }, 2000);
        setTimeout(function() {
            $("#footer-address").fadeIn(400).html("<strong>Our Place</strong>  New Address Location");
        }, 2400);
        i++;
    }
});

我试图让一段带有 setTimeout 函数的代码块通过 for 循环运行 3 到 4 次。从逻辑上讲，我可以看到 for 循环中的代码不想重复自身，可能是因为 setTimeout 时间值已经过去了。

有没有办法在循环之前重置时间值？或者有更好的方法来执行最终目标吗？

Answer 1

每个 for 循环不会等待超时完成，整个 for 循环可能会在 20 毫秒内完成:D 如果你想重复淡入淡出，你必须使用回调来做一些小功能。

    $( document ).ready(function() {
    var repeats = 4,
        times = 0,
        fade = function() {
            if (times >= repeats) return false;
            times++;
            $('#footer-address').fadeTo(400, 0, function() {
                $('#footer-address').html('text 1');
                $('#footer-address').fadeTo(400, 1, function() {
                    setTimeout(fade, 1000);
                });
            }); 
        };

    setTimeout(fade, 1000);
});

我不太明白你想用 .html() 做什么。难道要反复改变吗？

已编辑。