StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I figured out the solution. Not sure if I'm happy with it yet though. It's essentially a very poor "reset" of the CSS when <code>show</code> is clicked</p> <p>The animation loops forever. So I can't rely on a jQuery queue (finite length). I have to achieve the loop via the callback as shown in the code. The problem that causes: you can't <code>.stop(true, true)</code> . The first true clears the queue, but there is nothing in the queue after the animation that is currently running. So that's useless. The second true jumps to the last animation in the queue. Again useless, since we're actually going to be staying in the one thing that is looping on itself. The 2nd arg must be <code>false</code> to interrupt the, otherwise, infinite loop.</p> <p>The problem with interruption. It leaves the css where it is. You are now stuck with random css props on whatever it was that your animation was interpolating over (in my case the <code>background-color</code>). Also I wanted the interruption to be instant. So there was no other way.</p> <p>In my case, the <code>background-color</code> during the animation was being set on <code>element.style</code> (discovered by inspection in browser tools), which overrides anything else that's going on. This prop did not exist until the first animation had started running. Then it got interrupted and the supposed-to-be-temporary style got stuck there (I guess).</p> <p>So you run the animation again. The green class is applied. jQuery figures out the range of colors to progress through. Turns out its from #shadeofgreen to #thesameshadeofgreen, because the stuck <code>element.styles</code> value overrides anything provided by the class. So the animation slides between two of the same color. It's running! But there's no color to change to.</p> <p>So the fix in my case isn't horrible, but I'm still not sure I like it, because I'm not sure it could be easily applied to a variety of situations.</p> <p>Change</p> <pre><code>$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse) </code></pre> <p>to</p> <pre><code>$('div').stop(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse) </code></pre> <p>The key is the</p> <pre><code>.removeAttr('style').hide().addClass('green') </code></pre> <p>That is essentially your css reset. Guaranteed to always be there when you need it since it's happening exactly before the thing will get displayed again.</p> <p>Note that putting <code>!important</code> on the color in the <code>green</code> css class, doesn't work, because that (seems to) will override <code>element.styles</code> (which the jQuery animation uses), and you will not get the desired result.</p> <p>Of course I am still open to suggestions. I probably missed something since I only started looking at CSS and jQuery at the top of the week.</p> <p>You can see the effects of the <code>.removeAttr('style')</code> in the fixed code <a href="http://jsbin.com/ewumu" rel="nofollow noreferrer">here on jsbin</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