English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery 基础教程

jQuery 效果

jQuery 操作方法

jQuery 遍历

jQuery Ajax

jQuery 杂项

Manual de referencia de jQuery

jQuery 效果 animate() 方法

Métodos de efecto de jQuery

animate()方法对一组CSS属性执行自定义动画。

动画使从一种CSS样式配置到另一种CSS样式配置的过渡动画成为可能。

所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。

除字符串“ show”，“ hide”和“ toggle”外，字符串值不能设置动画（例如，背景色）。这些值允许隐藏和显示动画元素。

动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。

除了样式属性，还可以对某些非样式属性（例如：scrollTop和scrollLeft）进行动画处理。

语法1：

$$(selector).animate({styles}, duration, easing, callback)$$

语法2：

$$(selector).animate({styles}, {options})$$

示例

通过更改元素的宽度来设置元素的动画：

$("#btn1").click(function(){
　　$("div").animate({width:　"500px");
});
测试看看‹/›

通过更改元素的宽度和高度，使其具有动画效果：

$("#btn1").click(function(){
　　$("div").animate({width:　"500px");
　　$("div").animate({height:　"400px");
});
测试看看‹/›

通过传递多个样式属性和值来对元素进行动画处理：

$("#btn1").click(function(){
　　$("div").animate({
　　　　　width:"500px",
　　　　　height:"400px"
　　});
});
测试看看‹/›

使用带有animate()的duration和easing的参数：

$$("button").click(function(){
　　$("div").animate({width:"500px",　height:"400px"},　4000,　"linear");
});
测试看看‹/›

将animate()与回调函数一起使用：

$$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　},　500,　"linear",
　　function(){
　　　　$$(this).after("<h2>动画完成</h2">
　　});
});
测试看看‹/›

使用备用语法指定多个动画{ styles}和{ options }：

$$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　
　　　　duration:500,
　　　　easing:"linear",
　　　　complete:function(){
　　　　　　$$(this).after("<h2>动画完成</h2">
　　　　}
　　});
});
测试看看‹/›

用户滚动页面时添加平滑滚动：

let size = $$(".main").height();　//　获取".main" 高度
$$(window).keydown(function(event) {
　　if(event.which ===　40) {　//　else if(event.which ===
　　　　$$("html, body").animate({scrollTop: "+="　+　size},　300);
　　}　38) {　//　如果按下向上箭头键
　　　　$$("html, body").animate({scrollTop: "-="　+　size},　300);
　　}
});
测试看看‹/›

使用相对值为所有段落设置动画：

$$("p").click(function(){
　　$$(this).animate({
　　　　fontSize: "+=5px",
　　　　padding : "+=10px"
　　});
});
测试看看‹/›

此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：

$$("button").click(function(){
　　$$("div").animate({height: "toggle"});
});
测试看看‹/›

参数值（语法1）

$$(selector).animate({styles}, duration, easing, callback)$$
ParámetrosDescripción
stylesRequerido. Especificar una o varias propiedades CSS que producen el efecto de animación/值。
注意：与animate()方法一起使用时，属性名称必须为驼峰式：是paddingTop而不是padding-top，marginLeft而不是margin-left以及依此类推
duration（可选）确定动画将运行多长时间的字符串或数字。预设值为400毫秒

可能的值：

  • 毫秒（例如100、500、2000等）

  • “fast”

  • “slow”

easing（可选）指定在动画的不同点中元素的速度。默认值是 "swing"。

可能的值：

  • “swing”-在开始/结束时移动较慢，而在中间移动较快

  • “linear”-以恒定速度移动

callback（可选）animate 函数执行完之后，要执行的函数。

参数值（语法2）

$$(selector).animate({styles}, {options})$$
ParámetrosDescripción
stylesRequerido. Especificar una o varias propiedades CSS que producen el efecto de animación/Valor (igual que anteriormente).
options（Opcional）Especificar opciones adicionales para la animación

Opción opcional:

  • duration Una cadena o número que determina cuánto tiempo durará la animación

  • easing Una cadena que indica qué función de suavizado debe usarse en la transición

  • complete -Función llamada después de que la animación se complete

  • step -Función llamada para cada atributo de animación de cada elemento de animación

  • progress -Función a ejecutar después de cada paso de la animación

  • queue-Un valor booleano que especifica si se debe colocar la animación en la cola de efectos

  • specialEasing -DestylesMapa de un o varios atributos CSS y sus funciones de suavizado correspondientes

  • start -Función a ejecutar al inicio de la animación

  • done -Función a ejecutar al final de la animación

  • fail -Función a ejecutar si la animación no puede completarse

  • always -Función a ejecutar si el animación se detiene pero no se completa

Métodos de efecto de jQuery

HTML de jQuery/Métodos CSSMétodos de efecto de jQuery