jQuery Animate函數＆每個函數

Question

我正在使用keyup函數驗證一些文本輸入，並且我想在驗證方框時運行復選標記的動畫。

問題是，只要我點擊任何輸入，動畫就開始了。如果您點擊一次即鍵入一次，您將看到動畫發生。我假設動畫開始了，因爲我在keyup上添加了這個類，當你釋放鼠標點擊它時，它實際上會被觸發。有沒有其他的方法呢？

1. 我增加了時間爲5秒，而只是測試它
2. 爲什麼會觸發所有3個動畫，因爲我使用的each和next功能。
3. 有沒有辦法讓動畫在keyup開始。

我的代碼的要點是下面看到一個真人版的位置：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

我reconstructured你的一些代碼，可以optimzed以上，但它看起來相當不錯：

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; 
    } 
}); 

「表單」的事件代理僅用於執行，請參閱http://jsperf.com/jquery-live-vs-delegate-vs-on/4。

Answer 2

你可以試試：

<input type="text" id="name" value="Name" class="validate_me" valid_compare="Name" /><span></span><br /> 
<input type="email" id="email" value="Email" class="validate_me" valid_compare="Email" /><span></span><br /> 
<input type="phone" id="phone" value="Phone" class="validate_me" valid_compare="Phone" /><span></span><br /> 

$(function(){ 
    $('.validate_me').keyup(function(){ 
     var this_val = $(this).val(); 
     var valid_compare = $(this).attr("valid_compare"); 

     if (this_val != "" & this_val != valid_compare){ 
      $(this) 
       .next() 
       .css("margin-left","100px") 
       .html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />") 
       .animate({ 
        marginLeft: '10px' 
       }, 1000, function(){ 
      }); 
     } else { 
      $(this).next().html(""); 
     } 
    }); 
});​ 

這裏一個使用keyup（）的工作示例：http://jsfiddle.net/9gg3n/4/

因此，我添加了一個自定義屬性，用於比較輸入字段以進行驗證（例如：！= Name，！= Email等等）。當用戶移動類型（KEYUP（）），它會檢查它是否有效，以及動畫蜱如果是