Calling a CSS animation using jQuery

Question

I'm having a little trouble calling my CSS animation with jQuery. Basically, if the value of the input is nothing, I want the form to wobble (implying something is wrong). I tried using .addClass, but it still doesn't work.

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

Hushme · Accepted Answer · 2013-07-26 06:48:38Z

4

your using .someAnimation in jquery addClass function you should use it without DOT

you should use

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

answered Jul 26, 2013 at 6:48

Hushme

3,1541 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Over a year ago

Yeah, I make that mistake a lot. Fixed it, still isn't working. It works, but moves so fast and jerky.

Matthew Over a year ago

Is there a way to make it slower? or more smooth?

Human Being · Accepted Answer · 2013-07-26 06:56:53Z

0

Replace the .someAnimation with someAnimation . Then ,

Make sure that your if() condition is true and Try using the trim() like ,

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

But not sure this works in your scenario .

answered Jul 26, 2013 at 6:56

Human Being

8,44728 gold badges98 silver badges141 bronze badges

Collectives™ on Stack Overflow

Calling a CSS animation using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related