StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjquery setinterval minimize queue
text
Body
copied!<p>I am using jQuery to animate a banner, using fadein, fadeout and append. The problem I am having, is that while the desired outcome has been generated, every time I minimize or change tabs, the animations queue and then the webpage goes crazy when I open it again!</p> <p>How can I prevent this from happening? Could I add an if statement to check if the animation is already running? Can I bottle neck it to one animation?</p> <p>Consider:</p> <pre><code>$(function () { var fElement = $('.fadein'); fElement.find('img:gt(0)').hide(); setInterval(function () { if (!fElement.data('paused')) { fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein'); } else { console.log('waiting...'); } }, 5000); $('map').hover( function() { console.log('pausing'); fElement.data('paused', 1); }, function() { console.log('unpausing'); fElement.data('paused', 0); } ); }); if ( !console && !console.log ){ console = {}; console.log = function(){}; } </code></pre> <p>And the HTML:</p> <pre><code><div class="fadein"> <img src="#" usemap="#" border="0" width="964" height="49" alt="" style="" id="level2Menu"/> <img src="#" usemap="#" border="0" width="964" height="49" alt="" style="" id="level2Menu"/> </div> </code></pre> <p>Also, a fiddle: <a href="http://jsfiddle.net/L8ztR/" rel="nofollow">http://jsfiddle.net/L8ztR/</a></p> <p>Although it seems to be behaving strangely...</p> <p>Thanks!</p> <p>EDIT: FIXED USING .stop(true,true)!</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