Jquery 简明教程
jQuery - Animation
-
让我们学习如何使用 jQuery animate() 方法在网页或任何其他 jQuery (Javascript) 应用程序上创建自定义动画。
Let’s learn how to use jQuery animate() method to create custom animations on a web pages or any other jQuery (Javascript) Application.
jQuery animate() Method
-
jQuery animate() 方法用于通过更改 DOM 元素的 CSS 数值属性（例如宽度、高度、外边距、内边距、透明度、顶部、左侧等）创建自定义动画。
The jQuery animate() method is used to create custom animations by changing the CSS numerical properties of a DOM element, for example, width, height, margin, padding, opacity, top, left, etc.
-
以下 animate() 方法的简单语法如下：
Following is a simple syntax of animate() method:
$(selector).animate({ properties }, [speed, callback] );-
您可以应用任何 jQuery selector 来选择任何 DOM 元素，然后应用 jQuery animate() 方法使其动画化。以下是所有参数的说明，让您完全控制动画 −
You can apply any jQuery selector to select any DOM element and then apply jQuery animate() method to animate it. Here is the description of all the parameters which gives you a complete control over the animation −
-
properties − A required parameter which defines the CSS properties to be animated and this is the only mandatory parameter of the call.
-
speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
-
callback − An optional parameter which represents a function to be executed whenever the animation completes.
Animation Pre-Requisite
-
(a) - animate() 方法不会使隐藏的元素作为效果的一部分可见。例如，给定 $(selector).hide().animate({height: "20px"}, 500)，动画将运行，但元素将保持隐藏状态。
(a) - The animate() method does not make hidden elements visible as part of the effect. For example, given $(selector).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
-
(b) - 要将 DOM 元素的位置作为动画的一部分进行处理，首先，我们需要将其位置设置为 relative 、 fixed 或 absolute ，因为默认情况下，所有 HTML 元素都有 static 位置，它们不能使用 animate() 方法移动。
(b) - To manipulate the position of a DOM element as a part of the animation, first we need to set it’s position to relative, fixed, or absolute because by default, all HTML elements have a static position, and they cannot be moved using animate() method.
Example
-
以下示例展示如何使用 animate() 方法将 <div> 元素向右移动，直到达到 250px 的 left 属性。接下来，当我们单击 left 按钮时，相同的 <div> 元素返回到其初始位置。
The following example shows how to use animate() method to move a <div> element to the right, until it has reached a left property of 250px. Next when we click left button, the same <div> element returns to it’s initial position.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#right").click(function(){
$("div").animate({left: '250px'});
});
$("#left").click(function(){
$("div").animate({left: '0px'});
});
});
</script>
<style>
#left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
#box{position:relative;margin:3px;padding:12px;border:2px solid #666; height:100px; width:180px;}
</style>
</head>
<body>
<p>Click on Left or Right button to see the result:</p>
<div id="box" style="background-color:#9c9cff;">This is Box</div>
<button id="right" style="background-color:#fb7c7c;">Right Move</button>
<button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>Animation with Custom Speed
-
我们可以以不同的速度为 DOM 元素的不同 CSS 数值属性（例如，宽度、高度或左侧）制作动画。
We can animate different CSS numerical properties (for example, width, height, or left) of a DOM element with different speed.
Example
-
让我们重新编写上面的示例，其中我们将以 1000 毫秒的速度为 <div> 的 right 移动制作动画，以 5000 毫秒的速度为 left 移动制作动画。
Let’s re-write above example, where we will animate <div>'s right movement with a speed parameter of 1000 milliseconds, and left movement with a speed parameter of 5000 milliseconds.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#right").click(function(){
$("div").animate({left: '250px'}, 1000);
});
$("#left").click(function(){
$("div").animate({left: '0px'}, 5000);
});
});
</script>
<style>
#left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
#box{position:relative;margin:3px;padding:12px;border:2px solid #666; height:100px; width:180px;}
</style>
</head>
<body>
<p>Click on Left or Right button to see the result:</p>
<div id="box" style="background-color:#9c9cff;">This is Box</div>
<button id="right" style="background-color:#fb7c7c;">Right Move</button>
<button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>Animation with Pre-defined Values
-
我们可以将字符串 'show' 、 'hide' 和 'toggle' 用作 CSS 数值属性的值。
We can use strings 'show', 'hide', and 'toggle' as the value of CSS numeric properties.
Example
-
以下是一个示例，其中我们使用两个按钮将元素的 left 属性设置为 hide 或 show 。
Following is an example where we are setting left property of an element to either hide or show with the help of two buttons.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#right").click(function(){
$("div").animate({left: 'hide'});
});
$("#left").click(function(){
$("div").animate({left: 'show'});
});
});
</script>
<style>
#left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
#box{position:relative;margin:3px;padding:12px;border:2px solid #666; height:100px; width:180px;}
</style>
</head>
<body>
<p>Click on Left or Right button to see the result:</p>
<div id="box" style="background-color:#9c9cff;">This is Box</div>
<button id="right" style="background-color:#fb7c7c;">Right Move</button>
<button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>Animation with Multiple Properties
jQuery 允许我们同时给一个元素设置多个 CSS 属性。
jQuery animate() allows us to animate multiple CSS properties of an element at the same time.
Example
以下是一个用于设置一个 <div> 元素多个 CSS 属性的动画实例。当我们单击 Right Move 按钮时，这个 <div> 开始向右侧移动，直到它的 left 属性值达到 250px，与此同时，这个元素的不透明度减少为 0.2，并且盒子宽度和高度减少到 100px。然后，当我们单击 Left Move 按钮时，这个盒子返回到它的初始位置和尺寸。
Following is an example to animate multiple CSS properties of a <div> element. When we click on Right Move button, this <div> starts moving towards the right direction till it reaches a left property value to 250px, at the same time element’s opacity reduces to 0.2 and width & height of the box decreases to 100px. Next, when we click on the Left Move button, this box returns to its initial position and size.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#right").click(function(){
$("div").animate({left: '250px', width:'100px', height:'100px', opacity:0.2});
});
$("#left").click(function(){
$("div").animate({left: '0px',width:'180px', height:'100px', opacity:1.0});
});
});
</script>
<style>
#left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
#box{position:relative;margin:3px;padding:12px;border:2px solid #666; height:100px; width:180px;}
</style>
</head>
<body>
<p>Click on Left or Right button to see the result:</p>
<div id="box" style="background-color:#9c9cff;">This is Box</div>
<button id="right" style="background-color:#fb7c7c;">Right Move</button>
<button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>Animation with Queue Functionality
考虑一种情况，你需要应用多个动画，这意味着你需要多次一个接一个地调用 animate() 方法。在这种情况下，jQuery 通过一个先进先出 (FIFO) 队列处理这些动画请求，并允许根据你的创造力创建有趣的动画。
Consider a situation where you need to apply multiple animations which means you need to call animate() method multiple times one after the other. In such situation, jQuery handles these animation requests through a fist-in-fist-out (FIFO) queue and allows to create interesting animations based on your creativity.
Example
以下是一个实例，我们调用 animate() 方法 4 次，让一个 <div> 按顺序向多个方向移动。
Following is an example where we call animate() methods 4 times to take a <div> into multiple directions one by one.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").animate({left: '250px'});
$("div").animate({top: '100px'});
$("div").animate({left: '0px'});
$("div").animate({top: '0px'});
});
});
</script>
<style>
button {margin:3px;border:2px solid #666; height:30px; width:180px;cursor:pointer;}
#box{position:relative;margin:3px;padding:2px;border:2px solid #666; height:30px; width:170px;}
</style>
</head>
<body>
<p>Click on Start Animation button to see the result:</p>
<div id="box" style="background-color:#9c9cff;">This is Box</div>
<button style="background-color:#93ff93;">Start Animation</button>
</body>
</html>jQuery Effects Reference
你可以通过以下页面获取所有 jQuery 效果方法的完整参考： jQuery Effects Reference 。
You can get a complete reference of all the jQuery Effect Methods at the following page: jQuery Effects Reference.