Databases
StackOverflow2013
Postsdbo
POCallback function isn't waiting until the first function is complete. How do I fix/work around this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCallback function isn't waiting until the first function is complete. How do I fix/work around this?
    text
    copied!<p>I have a "slideshow"...of sorts. I'm trying have a div fade out, followed by another div fading in.</p> <p>The problem is, the visible div doesn't disappear completely before the new div appears. This causes an awkward flash where both divs are present at the same time.</p> <p>NOTE: I cannot stack the divs using absolute positioning, because I want the wrapper (parent) div to expand with the contents. I can't seem to achieve this when I take the divs out of the "flow" by absolute positioning them.</p> <p>JSfiddle: <a href="http://jsfiddle.net/a7mCL/1/" rel="nofollow">HERE.</a></p> <p>Here is the html:</p> <pre><code>&lt;a href="#" class="red"&gt;RED&lt;/a&gt; &lt;a href="#" class="blue"&gt;BLUE&lt;/a&gt; &lt;a href="#" class="green"&gt;GREEN&lt;/a&gt; &lt;a href="#" class="yellow"&gt;YELLOW&lt;/a&gt; &lt;div id="red"&gt;&lt;/div&gt; &lt;div id="blue"&gt;&lt;/div&gt; &lt;div id="green"&gt;&lt;/div&gt; &lt;div id="yellow"&gt;&lt;/div&gt; </code></pre> <p>...the CSS...</p> <pre><code>#red, #blue, #green, #yellow{display:none; width:200px; height:200px;} #red{background:red;} #blue{background:blue;} #green{background:green;} #yellow{background:yellow;} </code></pre> <p>...and the JQuery.</p> <pre><code>$('a.red').click(function() { $("#blue, #green, #yellow").hide('fade', function() { $("#red").show('fade'); }); }); $('a.blue').click(function() { $("#red, #green, #yellow").hide('fade', function() { $("#blue").show('fade'); }); }); $('a.green').click(function() { $("#red, #blue, #yellow").hide('fade', function() { $("#green").show('fade'); }); }); $('a.yellow').click(function() { $("#red, #blue, #green").hide('fade', function() { $("#yellow").show('fade'); }); }); </code></pre> <p>I've been fiddling with this forever! Any help would be much appreciated.</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