Search code examples
jquery-uijquery-callback

jQueryUI .show() callback doesn't wait for animation to end

I must be missing something simple or I'm doing this completely wrong. My goal is simple. I want to animate .show() .hide() and I'm using callback to wait for one animation to finish and I get two problems.

  1. animation is triggered twice
  2. callback is executed to soon / doesn't wait for first animation to end,

Here's my jQuery code:

   $('#miles').on({
    keyup: function(){if($(this).hasClass('error')){$(this).removeClass('error',animSpeed);}},
    focusin: function(){thisTime=$(this).val();if($(this).hasClass('error')){$(this).removeClass('error',animSpeed);}if($(this).val()=='miles'){$(this).val('');}},
    focusout: function(){
     if($(this).val()==''){$(this).val('miles');}
     else if(thisTime!=$(this).val()){
      if($(this).val().match(/^[0-9]+$/)&&$(this).val()>0){
       $.post('include/process.php',{q:'saveMiles',e:$('#email').val(),w:$(this).val()},function(json){
        if(json.error==null||json.error==undefined){
         $('#saved').html('last saved '+json.date);
        }else{
         $(this).addClass('error',animSpeed);
         if(json.type=='notaNumber'){$('#errorBox>p').hide('fade',animSpeedErr,function(){$('.'+json.type).show('fade',animSpeedErr);})};
        }
       },"json");
      }else{
       console.log('now');
       $(this).addClass('error',animSpeed);
       $('#errorBox>p').hide('fade',animSpeedErr,function(){console.log('now1');
        if($('#miles').val()==0){console.log('now2');$('.notZero').show('fade',animSpeedErr);}
        else{console.log('now3');$('.notaNumber').show('fade',animSpeedErr);}
       });
      }
     }
    }
   });


var animSpeed=700;
var animSpeedErr=350;
json.type = what kind of error to show

#errorBox>p has display:none; declaired in CSS

Function of this code: check if #miles is a number and if number is greater than 0, if not, hide previous errors and show current one. If I run this script, I get this in console:

now
now1
now2
now1
now2
now1
now2
now1
now2

Script is live at http://developer.sodobniinternet.eu/concertdrive. Just enter a 0 or an letter into "miles" input box and you will see the problem.

I tried with:

.stop(true,true)

with no success.

Also tried to remove from callback and sometimes works like I want, sometimes not. That's why I think that there's a callback, to call a function when previous one finishes.

Thank you for any and all your help.

Solution

  • The problem lies in the selector:

    $('#errorBox>p').hide('fade',animSpeedErr,function(){console.log('now1')

    There are four paragraphs in the #errorBox and each is being hidden individually, so your .hide() callback gets called 4 times for each focusout event