How jQuery creates Custom Animation

This article mainly shows you "jQuery how to create custom animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "jQuery how to create custom animation" this article.

JQuery effects-Animation

The jQuery animate () method allows you to create custom animations. Syntax:

(selector) .animate ({params}, speed,callback)

The required params parameters define the CSS property that forms the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function that is executed after the animation is complete.

$(document) .ready (function () {$("button") .click (function () {$("div"). Animate ({left: "250px"});}); start the animation

Move the div element to the right until the left attribute equals 250 pixels.

Tip: by default, all HTML elements have a static location and cannot be moved.

Tip: to manipulate the location, set the element's position attribute to relative, fixed, or absolute!

JQuery animate ()-manipulate multiple attributes

Note that multiple attributes can be used at the same time in the process of generating animation:

$(document) .ready (function () {$("button") .click (function () {$("div") .animate ({left: "250px", opacity: "0.5", height: "150px", width: "150px"});}); start the animation

Tip: can you use the animate () method to manipulate all CSS properties? Yes, almost!

However, when using animate (), you must use the Camel notation to write all attribute names, such as: you must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Meanwhile, color animation is not included in the core jQuery library. If you need to generate color animation, you need to download the Color Animations plug-in from jQuery.com.

JQuery animate ()-use relative valu

You can also define a relative value (which is relative to the current value of the element). You need to precede the value with + = or-=:

$(document) .ready (function () {$("button") .click (function () {$("div") .animate ({left: "250px", height: "+ = 150px", width: "+ = 150px"});}); start the animation

JQuery animate ()-uses predefined values

$(document) .ready (function () {$("button") .click (function () {$("div"). Animate ({height: "toggle"});}); start the animation

JQuery animate ()-use the queue feature

By default, jQuery provides queuing for animation. This means that if you write multiple animate () calls:

JQuery creates an "internal" queue containing these method calls, and then runs these animate calls one by one.

In the following example, we use the queue function to perform different animations:

$(document) .ready (function () {$("button") .click (function () {var div=$ ("div"); div.animate ({height: "300px", opacity: "0.4"}, "slow"); div.animate ({width: "300px", opacity: "0.8"}, "slow"); div.animate ({height: "100px", opacity: "0.4"}, "slow") Div.animate ({width: "100px", opacity: "0.8"}, "slow");});}); start animation

The following example moves the element to the right and then increases the font size of the text:

$(document) .ready (function () {$("button") .click (function () {var div=$ ("div"); div.animate ({left: "100px"}, "slow"); div.animate ({fontSize: "3em"}, "slow");}) Start Animation HELLO above is all the content of this article "how to create Custom Animation by jQuery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!