There are many functions that can be used to achieve animation effects, among which the animate function is one of the most common functions. The following is a brief introduction to how to use this function.
Basic form of animate function
The basic form of animation effect achieved through animate is:
$(selector).animate({params},speed,callback);
{params} is a required item. It is an object that specifies the CSS style that we want the specified element to have after it runs through the animation effect. Speed and callback are both optional, and speed specifies The speed at which the animation runs, its value can be a numeric type (for example, 1000 means that the animation will change to the style specified by params within 1 second), slow or fast. callback specifies the function to be executed after the animation ends.
Code example:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
Multiple assignment forms for variables in the {params} object
Regarding the variables in the {params} object, you can assign values in the following forms.
Absolute value form
The code example given above is to assign the params object in absolute value form
Relative value form
For example Say to add "+", "-", etc. in front of the variable value.
Code example:
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script>
show, hide and toogle
We can also assign the variable values of the params object to the above three values, such as the following code, its function That is to make the content of the div tag disappear.
$("button").click(function(){ $("div").animate({ height:'toggle' }); });
The above article about realizing the animation effect of the page through jquery (example code) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.
For more related articles on page animation effects (example code) achieved through jquery, please pay attention to the PHP Chinese website!