如何在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() 做什么。会反复改变吗？

已编辑。

Answer 2

我认为这是最干净的解决方案

See it here on jsfiddle

$(function() {
    var times = 3,
        elem = $('#footer-address')
        fader = setInterval(function() {
            elem.fadeOut(400, function() {
                elem.fadeIn(400);
            });
            if (--times === 0) {
                clearInterval(fader);
            }
        }, 1200);
});

调整计时数字，直到您对结果满意为止。

Answer 3

正如其他人所提到的，您在两个地方增加了i（在for 事后思考和循环体中），因此删除主体分配是要修复的第一部分。此外，原始 HTML 不会被“放回”。

但是，这不是主要问题。 JavaScript 立即执行循环（两次），因此所有淡出/淡入函数分别在 2000/2400 毫秒后执行，而不是按预期在超时后执行。您可以通过在演示中使用 console.log(i); 或 alert(i); 代替 i++ 来检查这一点，并在页面加载后立即看到 3 条日志行/警报。

我会将标记放置为 HTML，而不是在 JavaScript 中创建它，然后在 2 个 HTML 片段之间淡入淡出，例如参见 demo 或以下示例代码。

HTML

<div id="footer-address">
    <span><strong>We have moved!</strong> Our new address is:</span>
    <span><strong>Our Place</strong>  New Address Location</span>
</div>

CSS

#footer-address {
    margin-bottom: 2px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
}

#footer-address span:last-child {
    display:none;
}

JavaScript（需要 jQuery）

var $footer = $('#footer-address');
var i = 0;

(function swap(){
    var $hiddenSpan = $footer.find('span:hidden')

    $footer.find('span:visible').fadeOut(400, function() {
        $hiddenSpan.fadeIn(400)
    })

    if (i++ < 3) setTimeout(swap, 2000)
})();

JavaScript 使用以 2 秒为间隔运行 3 次的自执行函数（请参阅 http://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/）。我还利用了 jQuery .fadeOut() 函数的 callback（第二个）参数，以便 .fadeIn() 在fadeOut 完成后启动。

我确信这里还有改进的余地，但希望它仍然有用。