StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The issue is that you are triggering the next step using the callback function of the fadeOut action. So the next fadeIn happens after the fadeOut has completed. Instead you want the fadeIn to occur after the delay. You can use the <code>queue</code> method to achieve this:</p> <pre><code>.delay(timing).queue(function() { function2(); $(this).dequeue(); // Keeps the queue running, it stops if you don't do this }).fadeOut("slow", 0.3); </code></pre> <p>I have created a fiddle here <a href="http://jsfiddle.net/e8W5E/" rel="nofollow">http://jsfiddle.net/e8W5E/</a> to show it in action</p> <hr> <p><strong>Edit</strong> In response to roXon's comments, you could write the solution to be more elegant as follows. The HTML is updated to remove the redundant count...</p> <pre><code><div class="block"></div> <div class="block"></div> <div class="block"></div> </code></pre> <p>The jQuery then looks like...</p> <pre><code>$(function() { // These are the elements we will rotate var $blocks = $(".block"); // Set up the initial elements to 0.3 opacity $blocks.not(":eq(0)").fadeTo("fast", 0.3); // This is our repeating function var go = function($el, i, high, low, t) { $el.eq(i).fadeTo("slow", high) .delay(t) .queue(function() { // The next index is 1 + the current index // use modulus to repeat back to the beginning var next = (i + 1) % $el.length; go($el, next, high, low, t); $(this).dequeue(); }) .fadeTo("slow", low); }; // Start fading in and out go($blocks, 0, 1, 0.3, 1000); })(); </code></pre> <p>You can add as many blocks as you like with that class name and it will be included in the fadeIn and fadeOut rotation. And fiddle <a href="http://jsfiddle.net/e8W5E/1/" rel="nofollow">http://jsfiddle.net/e8W5E/1/</a></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