Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Seems like the ajax callback is executed before the question hiding ends, and the <code>$('#waiting').show(350);</code> comes after <code>$('#waiting').hide(350, ...)</code>. You have three possibilities to solve that:</p> <p>If you'd <strong>show</strong> the <code>#waiting</code> img <strong>immidiately</strong> (not waiting for the question to fade out), this won't happen; the answer should then also not wait for #waiting to hide.</p> <hr> <p>Or you use a variable to indicate that the answer is already fading in when the question has faded out, and show <strong>no animation</strong> then:</p> <pre><code>var answered = false, waiting = false; $('#question').hide(500, function(){ if (!answered) { waiting = true; $('#waiting').show(350); } }); $.getJSON('http://localhost/file.php', { i: $domain }, function(data){ $('#answer').html(data.message + $('#trybutton').html()); answered = true; if (waiting) { $('#waiting').stop().hide(350, function(){ $('#answer').show(350); }); } else { $('#answer').show(350); } }); </code></pre> <hr> <p>If you want the four animations to <strong>show always</strong> and <strong>consecutively</strong> (at least 1550ms), you'd need to code them manually:</p> <pre><code>var showanswer = false; $('#question').hide(500, function() { $('#waiting').show(350, function() { if (showanswer) // already loaded showanswer(); // execute callback else showanswer = true; // mark as shown }); }); $.getJSON('http://localhost/file.php', { i: $domain }, function(data){ $('#answer').html(data.message + $('#trybutton').html()); function animate() { $('#waiting').hide(350, function(){ $('#answer').show(350); }); } if (showanswer) // waiting image shown animate(); else showanswer = animate; // set as callback }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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