Databases
StackOverflow2013
Postsdbo
PONeed 2 jQuery instances to run at the same time on the same page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed 2 jQuery instances to run at the same time on the same page
    text
    copied!<p>I wrote some jQuery to slide some text in, and then after a delay, slide it out again and slide the next one in. Here is the script:</p> <pre><code>var About = { init: function () { var text_spans = $('.headline-box a'), extracts = new Array(), delay = 5, current = 0; text_spans.each(function (index) { if ($(this).is(":visible")) { current = index; } extracts.push($(this)); }); var interval = setInterval(function () { target = (current &lt; (extracts.length - 1)) ? current + 1 : 0; extracts[current].slideUp('slow'); extracts[target].slideDown('slow'); current = target; }, delay * 500); } } About.init(); </code></pre> <p>It works, but I have two instances of <code>.headline-box</code> on the page, each with 3 links (<code>a</code>) in. Like this (simplified):</p> <pre><code>&lt;div class="headline-box"&gt; &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt; &lt;a href="#"&gt;Dolar Sit Amet&lt;/a&gt; &lt;a href="#"&gt;Aliquam imperdiet ornare&lt;/a&gt; &lt;/div&gt; &lt;div class="headline-box"&gt; &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt; &lt;a href="#"&gt;Dolar Sit Amet&lt;/a&gt; &lt;a href="#"&gt;Aliquam imperdiet ornare&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Everything works fine (they all slide in, and out) but here's the problem: one box will run through the sequence once, and stop, wait for the other box to run through it, and then the first will start again.</p> <p>Does anyone have any idea why and how this could be fixed, so they both run simultaneously? Thank you for any help :)</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