Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to define different options for multiple arrays in one function?
    text
    copied!<p>this is my first stackoverflow question and I hope I didn't miss any relevant topics, however I didn't find an answer yet. I've been fiddeling around with a (probably simple) jquery task and I'm stuck. And, ehem, of course I'm a newbie to jquery, so please be kind :-)</p> <p>I'd like to do a simple flashing words cloudy thing, where different groups of words (list items) fade in and out with <em>individual delays</em>. I got this to work with a simple function which I call three times, for each of the three groups. I'd like to know if there's a way to combine these three functions, but still defining an individual delay for each array of words.</p> <p>Here's my fiddle: <a href="http://jsfiddle.net/alani/eHthD/" rel="nofollow">http://jsfiddle.net/alani/eHthD/</a></p> <p>Maybe there's no way to put everything in one function and it's totally ok to use the long version? I don't know. It just seems totally inefficient to me...</p> <p>For quick view here's one of my functions:</p> <pre><code>var wordIndex = -1; (function () { var words1 = $(".cloud1"); function showNextWord() { ++wordIndex; words1.eq(wordIndex % words1.length) .fadeIn(500) .delay(1000) .fadeOut(1000, showNextWord); } showNextWord(); })(); </code></pre> <p>And this is part of my list</p> <pre><code>&lt;ul&gt; &lt;li class="cloud1"&gt;smoke&lt;/li&gt; &lt;li class="cloud1"&gt;denim&lt;/li&gt; &lt;li class="cloud1"&gt;eyebrow&lt;/li&gt; &lt;li class="cloud2"&gt;angle&lt;/li&gt; &lt;li class="cloud2"&gt;staple&lt;/li&gt; &lt;li class="cloud2"&gt;basket&lt;/li&gt; ... </code></pre> <p>Thanks everybody!</p>
 

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