Databases
StackOverflow2013
Postsdbo
POjQueryUI .show() callback doesn't wait for animation to end
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQueryUI .show() callback doesn't wait for animation to end
    text
    copied!<p>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.</p> <ol> <li>animation is triggered twice</li> <li>callback is executed to soon / doesn't wait for first animation to end,</li> </ol> <p>Here's my jQuery code:</p> <pre><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]+$/)&amp;&amp;$(this).val()&gt;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&gt;p').hide('fade',animSpeedErr,function(){$('.'+json.type).show('fade',animSpeedErr);})}; } },"json"); }else{ console.log('now'); $(this).addClass('error',animSpeed); $('#errorBox&gt;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 </code></pre> <p>#errorBox>p has <em>display:none;</em> declaired in CSS</p> <p>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:</p> <pre><code>now now1 now2 now1 now2 now1 now2 now1 now2 </code></pre> <p>Script is live at <a href="http://developer.sodobniinternet.eu/concertdrive" rel="nofollow">http://developer.sodobniinternet.eu/concertdrive</a>. Just enter a 0 or an letter into "miles" input box and you will see the problem.</p> <p>I tried with:</p> <pre><code>.stop(true,true) </code></pre> <p>with no success.</p> <p>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.</p> <p>Thank you for any and all your help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload