周瑞兵_20210120 周瑞兵

一、学习总结

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元素的方法,在很大程度上减少了代码量,使得代码简洁,可读性高。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1