Is jQuery animation between two different CSS classes?

Question

I am trying to understand how jQuery animations work.

For example, if I have an a element with CSS that makes it look like a clickable image and given with and height in CSS, how would it be safe to animate the width and height this element?

Do I need to animate values ​​in a CSS class? Or do I need to set up a new CSS class with target values ​​for width and height and let jQuery animate from oldClass to newClass ?

Or can I just use the jQuery .width() and .height() methods, no matter what the values ​​are in CSS?

What bothers me: if I change the width of an element using jQuery, does that also change my CSS, or does jQuery / JavaScript just override the specified values ​​in CSS with something else? I mean: after using jQuery to edit the width, does this width also become the new value in the CSS file? Is it possible to apply this class to other elements and they will have a new width?

Answer 1

It will override the inline style.

Now I will show the version with the animation on the top, left, but you can apply it to almost all CSS properties.

HTML

 <span id="test">blablabla</span> 

CSS

 span{ position:absolute; display:block; height:50px; width:50px; } 

JQuery

 $('#test').animate({top:'100px',left:'50px'}, 500); 

fiddle

Answer 2

jQuery animate only animates css numeric values. It will not animate between classes (see the example below on how to do this). The .animate () function adds the css that you give it as a paramater, and adds it as the inline css. It will always override the CSS stylesheet. It's fine, but a little messy and can get out of hand very easily.

However, if you want to animate between classes, it is best to use performance and cleanup to use the css3 transition property. Example:

HTML

 <div class="myTestAnimation">Something to test</div> 

JQuery (you can use vanilla javascript for this). Just switching between classes. This way you have no style information at all in your css.

  jQuery(document).ready(function($) { $(".myTestAnimation").click(function() { $(this).toggleClass("animate"); }); }); 

CSS (this animates the width, height and background color) .animate () will not animate the background color to add an extra bonus.

 .myTestAnimation { width: 50px; height: 50px; background-color: red; -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear; transition: background-color 300ms linear, width 300ms linear, height 300ms linear; position: relative; } .myTestAnimation.animate { background-color: blue; width: 200px; height: 200px; } 

Answer 3

I know it has been a long time, but it can help someone look for an answer anyway. Based on the CSS3 transition property, you may run into problems when supporting older browsers.

The requested animation behavior between two states (CSS classes) can be fully implemented using jQuery UI , which supports this by extending the switchClass () method. It also supports all the advantages of the animate () method, such as duration, easing, callback, etc.

As the official documentation says: "

Like the built-in CSS transitions, jQuery UI class animations provide a smooth transition from one state to another, allowing you to keep all the details about which styles will be changed in CSS and from your JavaScript.

You can read all about it here .

jQuery UI can also be compiled to include only those things that you need, so you can reduce the size of the library by excluding functions that you will not use. Check available options here .

Hope this helped someone!