StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could change your JavaScript to:</p> <pre><code>setInterval(function(){ $('.active').animate({'left': '0px'},500) .delay(500) .animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active') .siblings('li') .addClass('active'); }, 2000); </code></pre> <p><a href="http://jsfiddle.net/darkajax/FV5jL/" rel="nofollow"><strong>JSFiddle Demo</strong></a></p> <p>This will loop indefinitely every 2 seconds...</p> <p>Keep in mind it'll only iterate over 2 elements (as shown on your example), if you need it to iterate over <code>n</code> number of elements, you can try this instead:</p> <pre><code>setInterval(function(){ var $current = $('.active').animate({'left': '0px'},500) .delay(500) .animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active'); if($current.next('li').length > 0) { $current.next('li').addClass('active'); } else { $current.siblings('li:eq(0)').addClass('active'); } }, 2000); </code></pre> <p>Basically caching the current active element on the <code>$current</code> variable, using the <code>if</code> to check if there's another <code><li></code> after it, and it case there's none, going back to the first <code><li></code> to add the class <code>active</code>...</p> <p><a href="http://jsfiddle.net/darkajax/FV5jL/4/" rel="nofollow"><strong>JSFiddle Demo 2</strong></a></p> <p><strong>Finally</strong>, If you want the first loop to be different than the other ones, you could do something like this:</p> <pre><code>setTimeout(function(){ loopList(); setInterval(loopList,4000); }, 1); function loopList(){ var $current = $('.active').animate({'left': '0px'},500) .delay(500).animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active'); if($current.next('li').length > 0) { $current.next('li').addClass('active'); } else { $current.siblings('li:eq(0)').addClass('active'); } } </code></pre> <p>In this case you'd be calling the first iteration from the <code>setTimeout</code> the first time right away (that's the reason for the 0 in this example), and then calling the <code>setInterval</code> which will loop every 4 seconds.</p> <p><a href="http://jsfiddle.net/darkajax/5yhPf/" rel="nofollow"><strong>JSFiddle Demo 3</strong></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