StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The solution for your question is a little more tricky than a simple <code>fadeToggle</code> because you don't want either DIV to display at the same time. The key is to chain the fade actions together, so the next fade action won't execute until the previous one has completed.</p> <p>Logically, you want: DIV1 fade in, DIV1 fade out, DIV2 fade in, DIV2 fade out, repeat.</p> <p>My solution below will take any two elements on the page and oscillate their visibility <em>without</em> showing either one at the same time. <code>iDuration</code> specifies the time for each transition in milliseconds.</p> <p><a href="http://jsfiddle.net/sNbcH/" rel="nofollow"><strong>Working example</strong></a></p> <p>HTML:</p> <pre><code><div id="div1" style="display:none;">DIV #1</div> <div id="div2" style="display:none;">DIV #2</div> </code></pre> <p>JavaScript:</p> <pre><code>function runToggle(iDuration, domFirst,domSecond) { $(domFirst).fadeToggle(iDuration, "linear",function() { $(domFirst).fadeToggle(iDuration, "linear",function() { $(domSecond).fadeToggle(iDuration,"linear",function() { $(domSecond).fadeToggle(iDuration,"linear",function() { setTimeout(function() { runToggle(domFirst,domSecond) ; },50); }); }); }); }); }; runToggle(1000, $('#div1'),$('#div2')); </code></pre> <p>I use the <code>setTimeout</code> not for timing purposes, but just to free up the JavaScript interpreter so the browser can do other things while this fade loop is running.</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