The best jQuery effects - Animation Tutorial In 2024, In this tutorial you can learn jQuery animations - animate () method,Examples,jQuery animate () - operating multiple properties,Examples,jQuery animate () - the use of relative value,Examples,() JQuery animate - use predefined value,Examples,jQuery animate () - Using the Queue function,Example 1,Example 2,
jQuery animate () method allows you to create custom animations.
jQuery animate () method is used to create custom animation.
grammar:
Required params parameter defines the formation of CSS properties animation.
The optional speed parameter specifies the duration of the effect. It may take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after completion.
The following example demonstrates a simple application animate () method. It <div> element to the right to move 250 pixels:
By default, all HTML elements have a static position and can not move. For operating position, remember the first element CSS position attribute set to relative, fixed or absolute! |
Please note that the process of generating the animation can use multiple properties:
You can animate () method to operate all CSS attributes? Yes, almost! However, the important thing to remember: When using animate (), write all the attributes names must use the Camel notation, for example, must be used instead of paddingLeft padding-left, instead of using marginRight margin-right, etc. . At the same time, the color animation is not included in the core jQuery library. If you need to generate color animation, you need to jquery.com download Color Animations plugin. |
You can also define the relative value (the value is relative to the current value of the element). Need to precede the value with the + = or - =:
You can even put the value of the animation property to "show", "hide" or "toggle":
By default, jQuery provides queuing capabilities for animation.
This means that if you write more than one after another animate () call, jQuery will create a method call these "internal" queue. Then one by one to run these animate calls.
The following example of the <div> element is moved to the right 100 pixels, and then increase the size of the text: