jQuery – Create Animations

To create Animations on a web page, use the jQuery animate() method. To move an element on a web page, you need to also use the position property. Set the value to relative, fixed, or absolute for the HTML element.

Let us see how to:

  • Animate a div with animate()
  • Animate a div with animate() – Use multiple properties

Animate a div

To animate a div, use the animate() method. In the below example, we have animated a div and moved it to the right. The left property is set to 300px and this is the limit till when the div will animate:


jQuery Animations

Animate a Div – Use multiple properties)

In this example, we will animate a Div and update the height, width, and font size as well. With jQuery, we can easily animate a div using the animate() method and update the div properties alongside. That means we can change multiple properties of that specific element.

Let us see an example wherein we will animate a div and update the height, width, and font size properties as well. For the animate() method, the font-size property is to be written in camel-case i.e. fontSize. This works for other properties as well:


jQuery Animation and update height width

jQuery - Slide an Element
Introduction to jQuery Traversing
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading