jQuery 动画

让我们学习如何使用jQuery的 animate() 方法在网页或者其它jQuery（Javascript）应用程序中创建自定义动画。

jQuery animate() 方法

jQuery的 animate() 方法用于通过改变DOM元素的CSS属性值（例如宽度、高度、外边距、内边距、透明度、上边距、左边距等）来创建自定义动画。

下面是 animate() 方法的简单语法：

$(selector).animate({ properties }, [speed, callback] );

jQuery animate（）方法不能用于动画非数字属性，如颜色或背景颜色等。不过,您可以使用jQuery插件 jQuery.Color 来动画化这些属性。

您可以应用任何jQuery 选择器 来选择任何DOM元素，然后使用jQuery animate（） 方法进行动画处理。下面是对所有参数的描述，这使您可以完全控制动画−

properties − 必需的参数，定义要动画处理的CSS属性，此为调用中唯一的强制参数。
speed − 一个可选的字符串，表示三个预定义的速度之一（”slow”、”normal”或”fast”），或运行动画的毫秒数（例如：1000）。
callback − 一个可选参数，表示在动画完成时要执行的函数。

动画前提条件

(a) - animate（）方法不会将隐藏的元素作为效果的一部分而显示出来。例如，给定$(selector).hide().animate({height: “20px”}, 500)，动画会运行，但元素仍然处于隐藏状态。

(b) - 要作为动画的一部分操纵DOM元素的位置，首先我们需要将其位置设置为 relative 、 fixed 或 absolute ，因为默认情况下，所有HTML元素都具有 static 位置，无法使用 animate（） 方法移动它们。

示例

以下示例展示了如何使用 animate() 方法将一个<div>元素向右移动，直到其达到250px的left属性。然后，当我们点击 left 按钮时，相同的<div>元素将返回到其初始位置。

<!doctype html>
<html>
<head>
<title>jQuery 示例</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>点击左或右按钮以查看结果：</p>

   <div id="box"  style="background-color:#9c9cff;">这是一个盒子</div>
   <button id="right" style="background-color:#fb7c7c;">向右移动</button>
   <button id="left" style="background-color:#93ff93;">向左移动</button>
</body>
</html>

自定义速度的动画

我们可以使用不同的速度来对DOM元素的不同CSS数字属性（比如宽度、高度或左边距）进行动画操作。

示例

让我们重写上面的示例，在这个示例中，我们将使用速度参数为1000毫秒来对<div>元素的右移进行动画操作，并使用速度参数为5000毫秒来对左移进行动画操作。

<!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>点击左移或右移按钮查看结果:</p>

   <div id="box"  style="background-color:#9c9cff;">这是一个盒子</div>
   <button id="right" style="background-color:#fb7c7c;">右移</button>
   <button id="left" style="background-color:#93ff93;">左移</button>
</body>
</html>

带预定义值的动画

我们可以使用字符串 ‘show’ 、 ‘hide’ 和 ‘toggle’ 作为 CSS 数值属性的值。

示例

以下是一个示例，我们通过两个按钮来设置元素的 left 属性为 hide 或 show 。

请注意，使用这些值设置任何数值型 CSS 属性将产生相同的结果。例如，如果将元素的宽度或高度设置为 hide ，则无论设置宽度属性还是高度属性，都会隐藏该元素。

<!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>点击左侧或右侧按钮查看结果：</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button id="right" style="background-color:#fb7c7c;">向右移动</button>
   <button id="left" style="background-color:#93ff93;">向左移动</button>
</body>
</html>

多属性动画

jQuery的 animate() 方法允许我们同时对一个元素的多个CSS属性进行动画效果。

示例

以下是一个示例，动画效果作用于一个<div>元素上。当我们点击” 右移 “按钮时，这个<div>元素向右移动，直到left属性值达到250px，同时元素的透明度减少到0.2，并且盒子的宽度和高度减小到100px。接下来，当我们点击” 左移 “按钮时，这个盒子返回到初始位置和大小。

<!doctype html>
<html>
<head>
<title>jQuery示例</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>点击左或右按钮以查看结果:</p>

   <div id="box"  style="background-color:#9c9cff;">这是一个盒子</div>
   <button id="right" style="background-color:#fb7c7c;">右移</button>
   <button id="left" style="background-color:#93ff93;">左移</button>
</body>
</html>

具有队列功能的动画

考虑一种情况，你需要应用多个动画，这意味着你需要连续多次调用animate()方法。在这种情况下，jQuery通过先进先出（FIFO）队列处理这些动画请求，并允许根据你的创意创建有趣的动画。

示例

以下是一个示例，我们连续四次调用animate()方法，将一个<div>沿着不同的方向依次移动。

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