Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery.animate() with css class only, without explicit styles

Tags:

jquery

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?

like image 247
rudnev Avatar asked Aug 08 '09 10:08

rudnev


People also ask

Can we do animation using only CSS without using JavaScript or jQuery?

CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.

Can the jQuery animate () method be used to animate any CSS property?

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.

Is it possible to manipulate all CSS properties with the animate () method?

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.

How can use a animate () method in jQuery?

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").


1 Answers

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.

like image 54
Jakub Arnold Avatar answered Sep 20 '22 18:09

Jakub Arnold