How to apply css transformations on HTML elements using jQuery?

Question

I have the following code:

<input type="text" name="name" required>

<div class="form-error-cont">
    <p class="form-err">
        <i class="icon-remove"></i>
        <span class="text">Your name is required.</span>
    </p>
</div>

Now, when the form is empty, I'm adding a animate class to the form-err class with jQuery.

When the animate class is there, I want to individually animate both the i and the span elements inside - with CSS.

How is that possible? Any special css selector is needed here?

.form-err.animate .icon-remove { opacity: 0; } ? I'm hesitant to post it as an answer because I'm not sure if this is what you mean. — Matis Lepik
– Matis Lepik, Commented Jun 23, 2016 at 22:19
Sure it's possible, no "special" css selector needed. I suggest you do some research on "transition" and "transform" CSS properties. — Heretic Monkey
– Heretic Monkey, Commented Jun 23, 2016 at 22:33

M.Tanzil · Accepted Answer · 2016-06-23 23:51:20Z

you need to use the css transformation on i and span separately.

i have modified your code please take a look, here is your answer.

Html:

<input type="text" name="name" id="input" required>
<button id="btn">
 Check
</button>
<div class="form-error-cont">
<p class="form-err">
    <i class="icon-remove">i </i>
    <span class="text">Your name is required.</span>
</p>
</div>

CSS

.form-err{
 opacity:0;
 transition:0.2s all linear;
 }
.animate{
 opacity:1;
}
.icon-remove,
.text {
 display: inline-block;
 transition: transform 500ms;
 transform: translateY(50px);
 }
 .text {
  transform: translateY(-50px);
}
.animate .icon-remove,
.animate .text {
 transform: translateY(0px);
}
.icon-remove {
color: red;
}

jQuery

$(function(){
$('#btn').click(function(){
var val = $("#input").val();
if(val==''){
$(".form-err").addClass("animate");
} else{

}
});
});

Working Fiddle JsFiddle

Mitchel Jager · Accepted Answer · 2016-06-23 22:29:28Z

0

I'm not quite sure how you want to animate it, but I have create a fiddle you can easily edit yourself.

https://jsfiddle.net/room1tfv/2/

You can check with $('input').val(); if an input is empty.

Currently the class gets after when it's empty, but from what you are saying you might want to reverse it.

Feel free to comment and ask for changes!

answered Jun 23, 2016 at 22:29

Mitchel Jager

4454 silver badges18 bronze badges

1 Comment

charlietfl Over a year ago

Put your code in the answer itself so answer is self contained. Use demos only to support what is actually in the answer

Collectives™ on Stack Overflow

How to apply css transformations on HTML elements using jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related