本文笔记基于团长原文：jQuery动画详解 。转载请注明出处！

文章目录

• 1.显示和隐藏
• 2.滑入和滑出
• 3.淡入和淡出
• 4.自定义动画
• 5.停止动画
• 6.关闭右下角广告
• 7. 小结

1.显示和隐藏

显示4种方式：

• .show()
• .show(1000)，1000是步长，单位毫秒
• .show(“slow”),其中还有normal，fast
• .show(步长，函数)
  隐藏.hide类似

2.滑入和滑出

与show（）方法类似

• 滑入动画：.slideDown（），一般都是下滑，如果在底部就是上滑
• 滑出动画：.slideUp（），一般都是上拉
• 切换上拉/下滑：.slideToggle（）

3.淡入和淡出

与show（）方法类似：

• 淡入(淡淡的进入视线)：.fadeIn()
• 淡出（渐渐消失）：.fadeOut()
• 切换淡入/淡出：.fadeToggle()

4.自定义动画

• js代码请参考：【JS特效笔记】scroll与缓动动画以及client可视区中的3.2，3.3节：回调函数。

• 点击事件函数：

var json = {};//位置、图形
var json2 = {};//第2个位置，图形
$("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });

5.停止动画

• 悬停显示下拉菜单参考：【jQuery笔记】选择器中的3.1节，但是没有上拉与下滑效果，变化是瞬间的。
• 悬停显示下拉菜单，要求显示上拉与下滑效果
• 捕获的是li事件
• .stop（参数1，参数2）；默认两个参数都是false，则后续动画会执行，立即停止当前动画
  鼠标进入：

  $(this).children("ul").stop().slideDown(1000);//下滑

鼠标离开：

$(this).children("ul").stop().slideUp(1000);//上拉

6.关闭右下角广告

先滑入再滑出，然后淡入，点击儿子span后就淡出。

 $(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            });

7. 小结

本文代码均来自团长博客：jQuery动画详解 ，所做工作是做了简单的笔记。主要介绍了显示隐藏，滑入滑出，淡入淡出方法，每种方法有4种形式；同时，还有停止方法。最后，介绍了应用在自定义动画，下拉菜单和关闭右下角广告等，如有不当之处，欢迎指正！

标签：jQuery,动画,淡入,show,笔记,滑入,1000
来源： https://blog.csdn.net/qq_34243694/article/details/95626608