jquery - 使用 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

你.someAnimation在 jqueryaddClass函数中的使用你应该不使用它DOT

你应该使用

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

Answer 2

将 .someAnimation替换为someAnimation。然后 ，

确保您的if()条件为真并尝试使用trim()之类的，

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

但不确定这是否适用于您的场景。