jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)

注意:

设置类样式方法比较适合样式多时操作,可以弥补css()不足;

原生js中className会覆盖元素原先里面的类名,jq里面类操作只是对指定类进行操作,不影响原先的类名;

4.jq效果

4.1显示隐藏

​ 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

4.11显示

show([speed],[easing],[fn]);

显示参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.12隐藏

hide([speed],[easing],[fn]);

隐藏参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.13切换

toggle([speed],[easing],[fn]);

切换参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.2滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

4.21下滑

slideDown([speed],[easing],[fn]);

下滑效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.22上滑

slideUp([speed],[easing],[fn]);

上滑效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.23滑动切换

slideUp([speed],[easing],[fn]);

滑动切换效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.3淡入淡出

淡入淡出,见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

4.31淡入

fadeIn([speed],[easing],[fn]);

淡入效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.32淡出

fadeOut([speed],[easing],[fn]);

淡出效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.33淡入淡出切换效果

fadeToggle([speed],[easing],[fn]);

淡入淡出切换效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.34渐进方式调整到指定的不透明

fadeTo([speed],opacity,[easing],[fn]);

效果参数:

1.opacity:透明度必须写,取值0-1;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
38702209)]

[外链图片转存中…(img-9gVXXEpo-1715538702209)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！