jquery点击回调 [英] jquery click callback

问题描述

我有一个由'click'处理程序触发的jquery函数：

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

$('#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);
    }
});

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

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

$('#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();
); 

推荐答案

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

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

但你正在使用的是什么， animate ，确实有一个持续时间，所以它有一个回调。您的回调函数应该在 .animate 中：

But what you're using, animate, does have a duration, so it has a callback. Your callback function should then be inside the .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);
});

还有一件事你应该知道：调用 .animate 改变不透明度很好，但是如果你只改变不透明度，有一种方法只做那个，并且还有一个回调： fadeIn（）和 fadeOut（）。

There is one more thing you should know : calling .animate to 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().

这篇关于jquery点击回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！