0

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

2 に答える 2

0

.someAnimationをsomeAnimationに置き換え ます。それで 、

if()条件が真であることを確認し、次のようにtrim()を使用してみてください。

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

しかし、これがシナリオで機能するかどうかはわかりません。

于 2013-07-26T06:56:53.860 に答える