CODEWITHSUNDEEP
javascriptjquery
jordan.baucke
jordan.baucke

Reputation: 4328

jquery click callback

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

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

Upvotes: 4

Views: 36514

Answers (2)

kasper Taeymans
kasper Taeymans

Reputation: 7026

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

Upvotes: 0

aaaaaa
aaaaaa

Reputation: 2618

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

Upvotes: 7

Related Questions