Home > Web Front-end > JS Tutorial > JavaScript Enhancement Tutorial—jQuery Animation

JavaScript Enhancement Tutorial—jQuery Animation

黄舟
Release: 2017-01-21 16:03:19
Original
1247 people have browsed it

jQuery Animation - animate() method

jQuery animate() method is used to create custom animations.

Syntax:

$(selector).animate({params},speed,callback);
Copy after login

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

element to the left until the left attribute is equal to 250 pixels:

Example

$("button").click(function(){ $("div").animate({left:'250px'}); });
Copy after login
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:&#39;250px&#39;});
  });
});
</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>
Copy after login

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)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template