Home > Developer > JavaScript
Use jquery to implement page animation effects (instance code) and jquery instances
There are many functions that can be used to achieve the animation effect. The animation function is one of the most common functions. The following describes how to use the function.
Basic Form of the animate Function
The basic form of animation effects through animate is:
$ (Selector). animate ({params}, speed, callback );
Among them, {params} is a required item. It is an object that specifies the CSS style of the element that we want to run through the animation effect. speed and callback are both optional, speed indicates the speed at which the animation runs. The value can be a numerical value (for example, 1000 indicates that the animation changes to the specified style of params within 1 s), slow, and fast. Callback indicates the function to be executed after the animation ends.
Sample Code:
<!DOCTYPE html>Variable assignment in {params} object
You can assign values to variables in the {params} object as follows.
Absolute value form
In the code example given above, the params object is assigned in the absolute value form.
Relative Value form
For example, add "+" and "-" before the variable value.
Sample Code:
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });});</script>Show, hide, and toogle
The variable value of the params object can also be assigned to the preceding three values. For example, in the following code, the function of the variable value is to make the div TAG content disappear.
$("button").click(function(){ $("div").animate({ height:'toggle' });});The above section uses jquery to implement the page animation effect (instance Code), which is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
