jquery click callback

I have jquery function that is triggered by a 'click' h开发者_Go百科andler:

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

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

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);
});

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().

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()