使用jQuery調用CSS動畫

Question

我在使用jQuery調用CSS動畫時遇到了一些麻煩。基本上，如果輸入的值是什麼都不是，我希望表單擺動（暗示有什麼錯誤）。我嘗試使用.addClass，但它仍然不起作用。

HTML

<form id="form"> 
    <input type="text" id="fld"/> 
    <button id="btn">Get</button> 
</form> 

CSS

form { 
display: block; 
margin: 0 auto; 
width: 340px; 
padding: 55px 0 0 0; 
-webkit-transition: webkit-transform .75s ease-in-out; 
} 

.someAnimation { 
-webkit-animation: errorAlert .75s ease-in-out; 
} 

@-webkit-keyframes errorAlert { 

0%{ 
    -webkit-transform:translateX(-20px); 
} 

25%{ 
    -webkit-transform:translateX(20px); 
} 


50%{ 
    -webkit-transform:translateX(-20px); 
} 

75%{ 
    -webkit-transform:translateX(20px); 
} 

100%{ 
    -webkit-transform:translateX(0px); 
} 


}  

jQuery的

$('#btn').on('click', function(){ 
      if($('#fld').val() == null || $('#fld').val() == ""){ 
       $('#form').addClass('.someAnimation'); 
      } 
     }); 

Answer 1

你的jQuery中addClass功能使用.someAnimation，你應該使用它，而DOT

你應該使用

$('#form').addClass('someAnimation'); 

Answer 2

更換.someAnimation與someAnimation。然後，

確保您如果（）條件真並使用裝飾（）喜歡嘗試，

$('#btn').on('click', function(){ 
     if($.trim($('#fld').val()) == null || $.trim($('#fld').val()) == "")   
      alert("Condition works"); 
      $('#form').addClass('someAnimation'); 
     } 
}); 

但不知道這部作品在您的情況。