jquery click callback

Question

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

aaaaaa · Accepted Answer · 2011-09-12 23:01:21Z

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

kasper Taeymans · Accepted Answer · 2011-09-27 13:34:09Z

0

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

edited Sep 27, 2011 at 13:34

user142162

answered Sep 12, 2011 at 23:03

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

jquery click callback

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related