Geek Answers Handbook

Jquery click callback

I have a jquery function that is launched by the '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 I click the button and hide it when the operation is complete, so I draw a callback , but it doesn’t look to work when I set it like this:

 $('#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(); );
+4
source share
2 answers

The click event is fired immediately and has a duration of 0, so it does not have a callback.

But what you use, animate , has a duration, so it has a callback. Then your callback function should be inside .animate :

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

But you are using multiple animations, so I think you want your callback function to be called when all these animated objects end with "animations." Here is what I will 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 the opacity is great, but if you just change the opacity, there is a method that does just that and also has a callback: fadeIn() and fadeOut() .

+7
source

Try it like this:

 $('#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 continue and do not wait for the animation to complete. Pioul's answer is correct, you should use the callback function from animate()

0
source

More articles:


All Articles