StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Answering the question you ask in your title: You can create functions from strings via <code>eval</code>, <code>new Function</code>, and by inserting a <code>script</code> element with the text you want. But it all comes to the same thing: Firing up the JavaScript parser and creating the function.</p> <p>But rather than nesting, I think you want chaining. Build a list of the animations in an array, and use the <code>animate</code> callback to call the next animation in the array. <em>Something</em> like:</p> <pre><code>var animations = [ /* css for first animation */, /* css for second animation */, /* etc. */ ]; var index = 0; function runAnimation() { if (index < animations.length) { $("#element").animate(animations[index++], runAnimation); } } </code></pre> <p>You'd build up the array dynamically, of course.</p> <hr> <p>gdoron points out in the comments that if all of your animations are on the same element, it can be even simpler:</p> <pre><code>var animations = [ /* css for first animation */, /* css for second animation */, /* etc. */ ]; var index = 0; for (index = 0; index < animations.length; ++index) { $("#element").animate(animations[index]); } </code></pre> <p>...because when you call <a href="http://api.jquery.com/animate" rel="nofollow"><code>animate</code></a> multiple times on the <strong>same</strong> element, by default the animations queue up (the <code>queue</code> option defaults to <code>true</code>; sadly the docs don't seem to say that). My code example above doesn't rely on the queue, and so in theory each entry in the array could be an object with a property for the selector for the elements to animate and the css to apply. But if it's all one element, you can just use a straight loop.</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