博客

jQuery animate()方法

  • Post category:jquery

jQuery animate()方法详解

jQuery animate()方法是用来执行动画效果的方法，可以实现元素的平滑变化，例如改变元素的位置、大小、透明度等。

语法如下：

$(selector).animate({params},speed,callback);
  • selector: 必需，CSS选择器，用来选择需要进行动画的元素。
  • params: 必需，定义一个或多个CSS属性和值的对象。如：{height:’300px’, width:’300px’}
  • speed: 可选，动画执行的时间，可以是毫秒，如：1000；也可以是字符串’fast’和’slow’。默认值是“normal”，大约为400毫秒。
  • callback: 可选，动画执行完毕后的回调函数。

其中，params对象中的属性可以是任何CSS属性，例如：height、width、opacity、margin-left等。

jQuery animate()方法的常见参数

参数 类型 描述
params Object 定义一个或多个CSS属性和值的对象。
duration String or Number 动画执行的时间，可以是毫秒，如：1000；也可以是字符串’fast’和’slow’。默认值是“normal”，大约为400毫秒。
easing String 规定要使用的缓动函数的名称（比如：”linear”或”swing”）
complete Function 动画执行完毕后的回调函数。

jQuery animate()方法示例说明

示例1：让一个元素向右移动

<!DOCTYPE html>
<html>
<head>
    <title>jQuery animate方法示例</title>
    <style type="text/css">
        #myDiv{
            background-color: #ccc;
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $("#myDiv").animate({left: 300}, 2000);
            });
        });
    </script>
</head>
<body>
    <div id="myDiv"></div><br>
    <button id="btn1">右移</button>
</body>
</html>

运行以上代码，点击”右移”按钮，就可以看到#myDiv元素向右移动的动画效果。在animate()方法中，我们只需要传入一个params对象，指定left属性的目标值为300，效果就可以被执行。

示例2：同时改变元素的宽度和高度

<!DOCTYPE html>
<html>
<head>
    <title>jQuery animate方法示例</title>
    <style type="text/css">
        #myDiv{
            background-color: #ccc;
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $("#myDiv").animate({width: '300px', height: '300px'}, 1000);
            });
        });
    </script>
</head>
<body>
    <div id="myDiv"></div><br>
    <button id="btn1">放大</button>
</body>
</html>

运行以上代码，点击”放大”按钮，就可以看到#myDiv元素同时改变宽度和高度的动画效果。在animate()方法中，我们传入一个对象，指定width和height属性的目标值为’300px’，效果就可以被执行。另外，我们也可以通过修改opacity属性，实现淡入淡出、闪烁等效果。

以上就是关于jQuery animate()方法的详细讲解，希望对您有所帮助。

Tags: