参考手册
jQuery 教程
jQuery 滑动
jQuery 停止动画

jQuery 效果 - 动画

使用j Query，您可以创建自定义动画。

jQuery

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法:
  1. $(selector).animate({params},speed,callback);

所需的 params 参数定义要设置动画的 CSS 属性。

可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.

可选参数 callback 是在 animate() 结束后执行的函数。

下面的示例演示了 animate() 方法的简单用法；它将 <div> 元素向右移动，直到其 left 属性达到 250px：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("div").animate({left: '250px'});
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  15. <button>开始动画</button>
  17. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  19. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  21. </body>
  22. </html>
运行一下
默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！

jQuery animate() - 操作多个属性

请注意，可以同时设置多个属性的动画：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("div").animate({
  9.       left: '250px',
  10.       opacity: '0.5',
  11.       height: '150px',
  12.       width: '150px'
  13.     });
  14.   });
  15. });
  16. </script>
  17. </head>
  18. <body>
  20. <button>开始动画</button>
  22. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  24. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  26. </body>
  27. </html>
运行一下
是否可以使用 animate() 方法操作所有 CSS 属性？

是的，差不多！但是，有一件重要的事情需要记住：当与 animate() 方法一起使用时，所有属性名都必须以驼峰大小写：您需要输入 paddingLeft 而不是 padding-left，marginRight 而不是 margin-Right，等等。

此外，颜色动画不包括在核心 jQuery 库中。

如果您想制作颜色动画，你需要从 jQuery 下载 颜色动画插件。

jQuery animate() - 使用 Relative 值

还可以定义相对值 Relative（然后该值与元素的当前值相对）。这是通过将 += 或 -= 放在值前面来实现的:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("div").animate({
  9.       left: '250px',
  10.       height: '+=150px',
  11.       width: '+=150px'
  12.     });
  13.   });
  14. });
  15. </script>
  16. </head>
  17. <body>
  19. <button>开始动画</button>
  21. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  23. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  25. </body>
  26. </html>
运行一下

jQuery animate() - 使用预定义的值

甚至可以将属性的动画值指定为: show, hide, 或者 toggle

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("div").animate({
  9.       height: 'toggle'
  10.     });
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  17. <p>多次单击该按钮以切换动画。</p>
  19. <button>开始动画</button>
  21. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  23. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  25. </body>
  26. </html>
运行一下

jQuery animate() - 使用队列功能

默认情况下，jQuery 附带用于动画的队列功能。

这意味着，如果您在彼此之后编写多个 animate() 调用，jQuery 将使用这些方法调用创建一个 "内部" 队列。然后它一个接一个地运行动画调用。

因此，如果您想在彼此之后执行不同的动画，我们将利用队列功能:

实例 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     var div = $("div");
  9.     div.animate({height: '300px', opacity: '0.4'}, "slow");
  10.     div.animate({width: '300px', opacity: '0.8'}, "slow");
  11.     div.animate({height: '100px', opacity: '0.4'}, "slow");
  12.     div.animate({width: '100px', opacity: '0.8'}, "slow");
  13.   });
  14. });
  15. </script>
  16. </head>
  17. <body>
  19. <button>开始动画</button>
  21. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  23. <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
  25. </body>
  26. </html>
运行一下

下面的示例首先将 <div> 元素向右移动，然后增加文本的字体大小:

实例 2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     var div = $("div");
  9.     div.animate({left: '100px'}, "slow");
  10.     div.animate({fontSize: '3em'}, "slow");
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  17. <button>开始动画</button>
  19. <p>默认情况下，所有 HTML 元素都有一个静态位置，不能移动。要改变位置，请记住首先将元素的 CSS position 属性设置为relative、fixed 或 absolute！</p>
  21. <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
  23. </body>
  24. </html>
运行一下

jQuery 效果参考

有关所有 jQuery 效果的完整概述，请访问本站的 jQuery 效果参考 。

jQuery 滑动
jQuery 停止动画

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML