2

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时间值已经过去了。

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

4

3 回答 3

2

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

已编辑。

于 2013-02-26T17:14:09.847 回答
0

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

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

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

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()（第二个）参数，以便在 fadeOut 完成后.fadeIn()启动。

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

于 2013-02-26T17:40:18.100 回答
0

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

在 jsfiddle 上看到它

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

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

于 2013-02-26T17:30:54.723 回答