Question

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.

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 keyup, which essentially get’s triggered after you release your mouse to click into it. Is there another way around that?

1. I increased the time to 5 seconds just while testing it
2. Why is it triggering all 3 animations since i’m using the each and the next functions.
3. Is there a way around having the animation start on keyup.

The gist of my code is below, see a live version here: http://jsfiddle.net/MhMCz/26/

$(':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")
   });   
}
)};

Answer 1

I reconstructured your code a little, could be optimzed more but it looks quite nice:

http://jsfiddle.net/MhMCz/30/

$('form').on('focus focusin blur focusout keyup', ':input', function(e) {
    var val = this.value,
        def = this.defaultValue,
        $t = $(this),
        $check = $t.next('span');

    switch(e.type){
        case 'focus':
        case 'focusin':
            if( val == def ) {
               this.value = '';
               $t.addClass('active');
            }
        break;
        case 'blur':
        case 'focusout':
            if(val == '') this.value = def;
            $t.removeClass('active');
        break;
        case 'keyup':
            if(val != '' && val != def) {
                $check.animate({
                    opacity: 1,
                    'margin-left': '10px'
                }, 'fast');
            } else {
               $check.animate({
                    opacity: 0,
                    'margin-left': '100px'
               }, 'fast');   
            }
        break;
    }
});

The event delegation from “form” ist just for performance, see http://jsperf.com/jquery-live-vs-delegate-vs-on/4.