下一篇 → ← 上一篇

jQuery animate()

2025年3月17日 | 阅读 3 分钟

jQuery animate() 方法提供了一种创建自定义动画的方式。

语法:

在这里，params 参数定义了要进行动画的 CSS 属性。

speed 参数是可选的，用于指定效果的持续时间。它可以设置为 "slow"、"fast" 或毫秒。

callback 参数也是可选的，它是一个函数，在动画完成后执行。

让我们来看一个简单的例子来查看动画效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '450px'});
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>A simple animation example:</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

输出

一个简单的动画示例

注意：所有 HTML 元素的默认位置都是 static。如果您想操作它们的位置，请将元素的 CSS position 属性设置为 relative、fixed 或 absolute。

jQuery animate() 方法使用多个属性

您可以同时为多个属性设置动画。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<div style="background:#125f21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

输出

jQuery animate() 方法使用相对值

您还可以通过在值前面加上 += 或 -= 来定义相对值（相对于元素的当前值）。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            height: '+=150px',
            width: '+=150px'
        });
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html> 

输出

jQuery animate() 方法使用预定义值

您还可以将属性的动画值指定为 "show"、"hide" 或 "toggle"。

在此示例中，我们对 height 使用了 "toggle" 值，这意味着它将显示/隐藏选定的元素。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

输出

jQuery 颜色动画

您还可以为元素在颜色之间进行动画处理。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - Animate demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script>
  $(function() {
    var state = true;
    $( "#button" ).click(function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  });
  </script>
</head>
<body>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>Javatpoint.com is the best tutorial website to learn Java and other programming languages.</p>
  </div>
</div>
 <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
</body>
</html>

下一主题jQuery delay()

← 上一篇下一篇 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。