Question

我有这个：

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc = this.href;

    //Do this first...
    $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut();
    });

    //And only then do this.. 
    window.location = loc;

});

如何在位置更改之前强制完成淡出效果？如果它只是一个fadeOut（）我会使用它的回调，但由于有很多，我无法弄清楚如何做到这一点。

干杯！本

Answer 1

以下works;

$("a.fadeout").click(function(event){
    event.preventDefault();

    var loc = this.href;
    var amount = $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut(function () {
            if (i == amount -1) {
                window.location = loc;
            }
        });
    }).length;
});

这是我能想到的最干净的方式。我们存储元素的总量并检查fadeOut的回调是否是绑定的最后一个回调。如果是，则执行重定向。

Answer 2

可以是：

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc = this.href;
    var list = $($(".faded").get().reverse());
    var size = list.length;
    var count = 0;
    list.each(function(i) {
        $(this).delay(i * 100).fadeOut(function () {
            if (++count == size) {
                window.location = loc;
            }
        });
    });
});

Answer 3

我遇到了同样的问题，请看一下这个链接，它会帮助您设计一个新的回调：http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html

Answer 4

欢迎来到异步的基于事件的非线性世界！

$(this).delay(i * 100)创建一个新的setTimeout()。这不会导致整个脚本暂停，否则整个浏览器会冻结这段时间。 jQuery提供了一些处理这类问题的方法，但是你这样做是不可能的。每次fadeOut()时都需要进行检查。

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc    = this.href,
        $stack = $(".faded").get().reverse();

    //Do this first...
    $($stack).each(function(i) {
        $(this).delay(i * 100).fadeOut().queue(function() {
            if($stack.lenght <= i+1) {
                window.location = loc;
            }
        });
    });
});

在jsFiddle上进行测试。

让jQuery等待一个.each函数在下一行执行之前完成？

4 个答案: