Using JQuery animate I would like to operate with css classes, defined somewhere in .css file, not to have to give all styles params to jquery.animate() explicitly.
I can create a fake (e.g. invisible) element with such a class, read its css properties and give them to jquery.animate() - does anybody know a better way?
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
The jQueryUI provides a extension to animate
function that allows you to animate css class.
edit: Example here
There are also methods to add/remove/toggle class which you might also be interested in.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With