jQuery 动画学习笔记

简介

jQuery 是一款广泛应用于 Web 开发中的 JavaScript 库，支持动态网页效果、事件处理、AJAX等功能。其中，动画效果是 jQuery 最为常见的应用之一。

常用动画方法

以下为 jQuery 常用的几种动画方法：

.hide()

语法：$(selector).hide(speed,callback);

作用：隐藏匹配元素。

参数：

• speed：可选，规定隐藏/显示的速度。可以是毫秒数，也可以是 "fast" 或 "slow"。
• callback：可选，规定隐藏完成后执行的函数。

示例：

jsCopy Code
$("#btn_hide").click(function(){
  $("#box").hide(1000);
});

.show()

语法：$(selector).show(speed,callback);

作用：显示被隐藏的匹配元素。

参数：

• speed：可选，规定隐藏/显示的速度。可以是毫秒数，也可以是 "fast" 或 "slow"。
• callback：可选，规定显示完成后执行的函数。

示例：

jsCopy Code
$("#btn_show").click(function(){
  $("#box").show(1000);
});

.toggle()

语法：$(selector).toggle(speed,callback);

作用：切换匹配元素的可见性。

参数：

• speed：可选，规定隐藏/显示的速度。可以是毫秒数，也可以是 "fast" 或 "slow"。
• callback：可选，规定切换完成后执行的函数。

示例：

jsCopy Code
$("#btn_toggle").click(function(){
  $("#box").toggle(1000);
});

.fadeIn()

语法：$(selector).fadeIn(speed,callback);

作用：将匹配元素的不透明度从隐藏到可见。

参数：

• speed：可选，规定淡入的速度。可以是毫秒数，也可以是 "fast" 或 "slow"。
• callback：可选，规定淡入完成后执行的函数。

示例：

jsCopy Code
$("#btn_fadeIn").click(function(){
  $("#box").fadeIn(1000);
});

.fadeOut()

语法：$(selector).fadeOut(speed,callback);

作用：将匹配元素的不透明度从可见到隐藏。

参数：

• speed：可选，规定淡出的速度。可以是毫秒数，也可以是 "fast" 或 "slow"。
• callback：可选，规定淡出完成后执行的函数。

示例：

jsCopy Code
$("#btn_fadeOut").click(function(){
  $("#box").fadeOut(1000);
});

实例

以下为一个简单的实例，利用上述动画方法实现了一个点击按钮时，使一个元素从隐藏状态淡入显示，再从显示状态淡出隐藏的效果。

HTML代码：

htmlCopy Code
<button id="btn">点击我</button>
<div id="box"></div>

JavaScript代码：

jsCopy Code
$("#btn").click(function(){
  $("#box").fadeIn(1000).fadeOut(1000);
});

该实例中，点击按钮时，先使用 .fadeIn() 方法将元素淡入显示，再使用 .fadeOut() 方法将元素淡出隐藏。其中，两个方法均设置了速度为 1000ms，即一秒钟的时间，以达到比较平滑的效果。