StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's the plugin you were looking for :) Does the exact same thing, but is much more flexible than your existing code <a href="http://jsfiddle.net/ZPvrD/11/" rel="nofollow">http://jsfiddle.net/ZPvrD/11/</a></p> <pre><code>(function($){ $.fn.fadeInOut = function(middleDelay) { middleDelay = middleDelay || 0; var index = 0, direction = 1, // 1: fading in; -1: fading out me = this, size = me.size(); function nextAnimation() { // Before the first element, we're done if (index === -1 ) { return; } var currentEl = $(me.get(index)), goingForward = direction === 1, isLastElement = index === (size - 1); // Change direction for the next animation, don't update index // since next frame will fade the same element out if (isLastElement && goingForward) { direction = -1; } else { index += direction; } // At the last element, before starting to fade out, add a delay if ( isLastElement && !goingForward) { currentEl.delay(middleDelay); } if (goingForward) { currentEl.fadeIn(nextAnimation); } else { currentEl.fadeOut(nextAnimation); } } nextAnimation(); return this; } })(jQuery); </code></pre> <p>And you call it like</p> <pre><code>$('div.slideWrapper>div.slide').fadeInOut(3000); </code></pre> <p>This process of traversing up and down a list of jQuery elements waiting for each animation to finish could be abstracted so that it could be used for other things besides <code>fadeIn</code> and <code>fadeOut</code>. I'll leave that for you to try out if you feel adventurous.</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