为什么在not($(this))之后回调函数重复多次？

Question

我已经做了一个回调函数，这个函数是在

$('.menuIco').not($(this)).fadeOut()

但是，我有9个回调，而不是一个回调(可能是由于not($(this))导致的10-1=9个元素)。

为什么？以及如何预防呢？

我正在使用变量的解决方法，但在我看来，它并不太专业。

var loaded = false;

$('.menuIco').not($(this)).fadeOut(function() { // hide all icons but one
    if(loaded==false) {
        loaded = true;

        $('.menuIco p').addClass("icoCaptionOff");
        $(menuIco).animate({top: "20", left: "-100"}, "fast", function() {
            LoadContent($(menuIco).attr('id'));

        });
    }
});

Answer 1

在完成所有元素的动画之后，可以使用.promise()执行回调。

.promise()方法返回动态生成的承诺，一旦绑定到集合的所有特定类型的操作(不管是否排队)结束后，该承诺将被解析。 默认情况下，输入为"fx"，这意味着当选定元素的所有动画完成后，返回的承诺将被解析。

$('.menuIco').not(this).fadeOut().promise().done(function () {
    $('.menuIco p').addClass("icoCaptionOff");
    $(menuIco).animate({
        top: "20",
        left: "-100"
    }, "fast", function () {
        LoadContent($(menuIco).attr('id'));

    });
});

Answer 2

类.menuIco可能有多个元素。因此，在回调中，您应该使用$(this)，而不是再次选择$('.menuIco p')。

var loaded = false;

$('.menuIco').not($(this)).fadeOut(function() { // hide all icons but one
    var $this = $(this);

    if(loaded==false) {
        loaded = true;

        $this.find('p').addClass("icoCaptionOff");
        $this.animate({top: "20", left: "-100"}, "fast", function() {
            LoadContent($this.attr('id'));
        });
    }
});

Answer 3

在完成另一个函数时，可以使用when和then延迟处理程序执行一个函数：

提供一种基于一个或多个对象(通常是表示异步事件的延迟对象)执行回调函数的方法。

博士：http://api.jquery.com/jQuery.when/

代码：

$('.menuIco').click(function () {
    $.when($('.menuIco').not(this).fadeOut()).then(function () {
        console.log('foo')
    })
})

演示：http://jsfiddle.net/IrvinDominin/hvm79/