使用jQuery调用CSS动画
使用jQuery调用CSS动画
提问于 2013-07-26 06:44:10
我在用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');
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-26 06:48:38
在jQueryaddClass函数中使用.someAnimation应该不使用DOT
你应该使用
$('#form').addClass('someAnimation');Stack Overflow用户
发布于 2013-07-26 06:56:53
将.someAnimation替换为someAnimation。然后，
确保您的if()条件是true，并尝试使用trim()，
$('#btn').on('click', function(){
if($.trim($('#fld').val()) == null || $.trim($('#fld').val()) == "")
alert("Condition works");
$('#form').addClass('someAnimation');
}
});但不确定这在你的场景中是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17874619
复制相关文章
相似问题
腾讯云开发者
