jQuery | animate() 与示例

介绍

jQuery 的 animate() 方法是一个用于实现动画效果的函数。使用 animate() 函数可以实现对元素的位置、尺寸、透明度、颜色等属性的动画效果。

animate() 函数在执行动画的过程中，可以设置多个属性变化，也可以设置变化的速度、类型以及回调函数。

语法

animate() 函数的语法如下：

$(selector).animate(styles,speed,easing,callback);

• selector: 选择器，选中要实现动画效果的元素。
• styles: 要改变的 CSS 属性及值，用 JavaScript 对象表示。
• speed: 动画的持续时间。
• easing: 动画的缓动类型。
• callback: 动画完成后的回调函数。

示例

下面是一个用 animate() 函数实现动画效果的示例：

<!-- HTML 代码 -->
<button id="move">Move me</button>

// JavaScript 代码
$("#move").click(function(){
  $(this).animate({
    left: '+=50px',
    opacity: 0.5,
    height: 'toggle'
  }, 1000, function() {
    alert("Animation complete.");
  });
});

运行结果及代码说明：

当点击按钮时，按钮向右移动 50 像素（left 属性变化）、透明度变为 0.5（opacity 属性变化）、同时高度变化（height 属性变化），动画持续时间为 1 秒（1000 毫秒），完成后弹出提示框（回调函数）。

该示例展示了 animate() 函数设置变化属性的基础用法，可以根据需要进行自定义设置。