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

JavaScript Enhancement Tutorial—jQuery Animation

黄舟Original: 2017-01-21 16:03:191215browse

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:&#39;250px&#39;}); });

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

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

Statement：

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

Previous article：JavaScript Enhancement Tutorial - Summary of Native.js ExamplesNext article：JavaScript Enhancement Tutorial - Summary of Native.js Examples

See more

JavaScript Enhancement Tutorial—jQuery Animation

Related articles