一、学习总结

1、jQuery 动画总结

1.1 说明

javascript
// jQuery提供的一组网页中常见的动画效果;
// 这些动画是标准的、有规律的效果；
// 同时还提供给我们了自定义动画的功能。

1.2 常用方法

javascript
显示：show()  slideDown()  fadeIn()
隐藏：hide()  slideUp()  fadeOut()
其他：slideToggle() stop()

1.3 隐藏和显示

1.3.1 显示方法show()方法一

javascript
$(selector).show(2000);
// 参数为数值类型，表示：执行动画时长
// 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 

1.3.2 显示方法show()方法二

javascript
$(selector).show("slow"); 
$(selector).show("normal");
$(selector).show("fast");
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
// 跟用法一的对应关系为：
// slow：600ms
// normal：400ms
// fast：200ms 

1.3.3 显示方法show()方法三

javascript
$(selector).show(2000, function() {
   //回调函数执行代码
 });
// 参数一：可以是数值类型或者字符串类型
// 参数二：动画执行完后立即执行的回调函数

1.4 滑入/滑出动画效果

1.4.1 slideDown()

javascript
/作用/：让元素以下拉动画效果展示出来
$(selector).slideDown(speed, callback);
$(selector).slideDown();

1.4.2 slideUp()

javascript
/作用/：让元素以下拉动画效果展示出来
$(selector).slideDown(speed, callback);
$(selector).slideDown()

1.4.3 滑入滑出切换动画效果

javascript
$(selector).slideToggle(speed, callback);

1.5 淡入淡出动画

1.5.1 淡入fadeln()

javascript
/作用/：让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);

1.5.2 淡出动画fadeOut()

javascript
/作用/：让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);\

1.5.3 淡入淡出切换fadeToggle ( )

javascript
/作用/：通过改变不透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast', callback);

二、心得体会

jQuery封装了很多JavaScript操作dom元素的方法，在很大程度上减少了代码量，使得代码简洁，可读性高。