Question

I’m using the jQuery Form plugin to upload an image. I’ve assigned a fade animation to happen the beforeSubmit callback, but as I’m running locally, it doesn’t have time to finish before the success function is called.

I am using a callback function in my fade(); call to make sure that one fade completes, before the next one begins, but that does not seem to guarantee that the function that’s calling it is finished.

Am I doing something wrong? Shouldn’t beforeSubmit complete before the ajax call is submitted?

Here’s are the two callbacks:

beforeSubmit:

function prepImageArea() {   if (userImage) {     userImage.fadeOut(1500, function() {       ajaxSpinner.fadeIn(1500);     });   } } 

success:

function imageUploaded(data) {   var data = evalJson(data);   userImage.attr('src', data.large_thumb);   ajaxSpinner.fadeOut(1500, function() {     userImage.fadeIn(1500);   }); } 

Answer 1

I think you may be getting too fancy with those fade animations :)… In the beforeSubmit the fadeOut is setup but the function returns immediately causing the submit to happen. I guess the upload is happening under 3 seconds causing the new image to appear before your animations are complete.

So if you really really want this effect, then you will need to do the image fadeout, spinner fadein, and once that is complete triggering the upload. Something like this:

if (userImage) {   userImage.fadeOut(1500, function() {     ajaxSpinner.fadeIn(1500, function(){         //now trigger the upload and you don't need the before submit anymore     });   }); } else {    // trigger the upload right away }