Home > Article > Web Front-end > JavaScript Enhancement Tutorial—jQuery Animation
jQuery Animation - animate() method
jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
Required params parameters define the CSS properties that form 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 to be executed after the animation is completed.
The following example demonstrates a simple application of the animate() method; it moves the dc6dce4a544fdca2df29d5ac0ea9906b element to the left until the left attribute is equal to 250 pixels:
Example
$("button").click(function(){ $("div").animate({left:'250px'}); });
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>开始动画</button> <p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
The above is the content of the JavaScript enhancement tutorial-jQuery animation. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!