Question

我做了一个回调函数，意味着在

之后启动

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

但是我有9个回调而不是1个回调（可能是因为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（）方法返回一个动态生成的Promise   一旦绑定到集合的某个类型的所有操作解决，   排队与否，已经结束。

默认情况下，type为“fx”，表示已解析返回的Promise   当所选元素的所有动画都已完成时。

$('.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/

Answer 4

您可能希望在$(this)上应用回调，而不是在每个回调函数中的每个.menuIco上应用回调。

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

        $(this).find('p').addClass("icoCaptionOff");

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

});

为什么不在（$（this））重复多次后回调函数？

4 个答案: