StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery Animate function & the Each function
text
Body
copied!<p>I am validating some text inputs using the keyup function, and I want to run an animation of a check mark when the box is considered validated. </p> <p>The problem is that as soon as I click into any input, the animation starts. If you type once as soon as you click in, you will see the animation happen. I'm assuming the animation starts because i'm adding the class on <code>keyup</code>, which essentially get's triggered after you release your mouse to click into it. Is there another way around that? </p> <ol> <li>I increased the time to 5 seconds just while testing it</li> <li>Why is it triggering all 3 animations since i'm using the <code>each</code> and the <code>next</code> functions.</li> <li>Is there a way around having the animation start on <code>keyup</code>.</li> </ol> <p>The gist of my code is below, see a live version here: <a href="http://jsfiddle.net/MhMCz/26/" rel="nofollow">http://jsfiddle.net/MhMCz/26/</a> </p> <pre><code>$(':input').each(function(){ var values = $(this).attr('value'); $(this).keyup(function(){ if( $(this).val() !== '' && $(this).val() !== values) { $(this).addClass('animated'); $(this).next('span').html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />"); } else { $(this).removeClass('animated'); $(this).next('span').html(''); } }); if ( $(this).next('span').hasClass('animated') ) { } else { $(this).next('span').animate({ marginLeft: '10px' }, 5000, function(){ alert("animation complete") }); } )}; </code></pre>

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