Javascript jquery点击回调

jquery click callback

提问by jordan.baucke

I have jquery function that is triggered by a 'click' handler:

我有一个由“点击”处理程序触发的 jquery 函数：

$('#showDatesCheckbox').click(function(){
    var table = $('#planningViewTable').find('tr');
    if ($('#showDatesCheckbox').is(':checked')) {
        table.find('.textDate').stop().animate({
            "opacity": 1
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 1
        }, 1000);
    }
    else {
        table.find('.textDate').stop().animate({
            "opacity": 0
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 0
        }, 1000);
    }
});

I wanted to have an ajax loading indicatoranimation, so I need it to show when the click is triggered, and hide when the operation is completed, so I figure callbackbut it doesn't seem to be working when I set it up as follows:

我想要一个ajax加载指示器动画，所以我需要它在触发点击时显示，并在操作完成时隐藏，所以我想回调但是当我如下设置时它似乎不起作用：

$('#showDatesCheckbox').click(function(){
            $('#planningView').mask('Loading...');
    var table = $('#planningViewTable').find('tr');
    if ($('#showDatesCheckbox').is(':checked')) {
        table.find('.textDate').stop().animate({
            "opacity": 1
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 1
        }, 1000);
    }
    else {
        table.find('.textDate').stop().animate({
            "opacity": 0
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 0
        }, 1000);
    }
},  
    $('#planningView').unmask();
); 

回答by Pioul

The clickevent is triggered immediately, and has a duration of 0, thus it doesn't have any callback.

该click事件立即触发，持续时间为 0，因此它没有任何回调。

But what you're using, animate, does have a duration, so it has a callback. Your callback function should then be inside the .animate:

但是您使用的 ,animate确实有持续时间，因此它有一个回调。然后，您的回调函数应位于.animate：

$('#showDatesCheckbox').click(function(){
    $("#foo").animate({ opacity: 1 }, 1000, function(){
        // your callback
    });
});

But you're using multiple animates, so i guess you want your callback function to be called when all these animates are finished "animating". Here's what i would do :

但是您使用了多个动画，所以我想您希望在所有这些动画完成“动画”后调用回调函数。这是我会做的：

$('#showDatesCheckbox').click(function(){
    var callback_count = 2; // the number of animates you do before you want to actually call your callback function
    var yourCallbackFunction = function(){
        if(--callback_count <= 0){
            // your callback
        }
    }
    $("#foo").animate({ opacity: 1 }, 1000, yourCallbackFunction);
    $("#bar").animate({ opacity: 1 }, 1000, yourCallbackFunction);
});

There is one more thing you should know : calling .animateto change opacity is great, but if you only change opacity, there is a method that does only that, and also has a callback : fadeIn()and fadeOut().

还有一件事您应该知道：调用.animate更改不透明度很棒，但是如果您只更改不透明度，则有一种方法可以做到这一点，并且还有回调 :fadeIn()和fadeOut()。

回答by kasper Taeymans

Try it this way:

试试这个方法：

$('#showDatesCheckbox').click(function(){
$('#ajaxgif').fadeIn();
var table = $('#planningViewTable').find('tr');
if ($('#showDatesCheckbox').is(':checked')) {
    table.find('.textDate').stop().animate({
        "opacity": 1
    }, 1000);
    table.find('.inlineTextDate').stop().animate({
        "opacity": 1
    }, 1000);
}
else {
    table.find('.textDate').stop().animate({
        "opacity": 0
    }, 1000);
    table.find('.inlineTextDate').stop().animate({
        "opacity": 0
    }, 1000);
};$('#ajaxgif').fadeOut();
});

EDIT: sorry this will not work because the script will proceed and not wait until animation is completed. Pioul answer is correct, you have to use the callback option from animate()

编辑：抱歉，这将不起作用，因为脚本将继续执行，而不是等到动画完成。Pioul 的答案是正确的，您必须使用来自animate()