3

我正在玩加载和移动页面上的 div 元素。我试图淡入一个字符串然后反转它。反向循环需要等到初始淡入循环完成之后。这是我到目前为止所拥有的，但它不执行反向循环。我假设是因为它还看不到最初的 div。

var string_to_reverse = "Reverse",
i;

for (i = 0; i < string_to_reverse.length; i++) {
    $("<div>" + string_to_reverse[i] + "</div>").hide()
        .appendTo("body").delay(500 * i).fadeIn(1000);
}

$("body div:last").load(function () {
    for (i = 1; i <= $("body div").length; i++) {
        $("body div:eq(" + i + ")").detach().prependTo($("body"));
    }
});

http://jsfiddle.net/vk45U/

4

2 回答 2

2

div 上没有加载事件，所以$("body div:last").load不会做任何事情。您可以在操作完成后将函数传递给fadeIn 以触发。尝试将回调添加到最后一个动画 div。有点乱，但我相信你可以清理它

var string_to_reverse = "Reverse",
i;

for (i = 0; i < string_to_reverse.length; i++) {
    var dummy = function(){};
    $("<div>" + string_to_reverse[i] + "</div>").hide()
        .appendTo("body").delay(500 * i).fadeIn(1000, (i == string_to_reverse.length - 1)?rev:dummy);
}

function rev () {console.log('rev');
    for (var i = 1; i <= $("body div").length; i++) {
        $("body div:eq(" + i + ")").detach().prependTo($("body"));
    }
}

http://jsfiddle.net/mowglisanu/wXrC9/

于 2012-12-23T06:56:51.783 回答
1

您尝试做的事情是错误的：您真的不知道某件事将花费多少时间（您只能猜测，有时只是有根据的猜测，但这仍然是猜测）。

不要依赖当前的方法，请看一下基于事件的编程方法。在您的情况下，它可能正在使用事件处理程序（例如，onload如果您正在加载一些外部内容，请使用“”事件处理程序）或高阶函数（使用将在您执行某些操作后调用的回调，也可能通过将它们作为一部分附加也有通风口处理程序）。

更多阅读：

于 2012-12-23T06:59:04.177 回答