六、jQuery动画特效（一）

2401_84149996

于 2024-05-16 11:40:04 发布

阅读量223

点赞数 5

分类专栏：程序员文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2401_84149996/article/details/138954625

版权

程序员专栏收录该内容

198 篇文章 0 订阅

订阅专栏

   $("p").show(2000);

   });

 });

<p>这是一个测试段落!</p>

<button class="btn1">隐藏</button>

<button class="btn2">显示</button>




![在这里插入图片描述](https://img-blog.csdnimg.cn/10ad91ef6c934756a121452d655e8e1d.gif)



图1 显示的结果



![在这里插入图片描述](https://img-blog.csdnimg.cn/45fc714e04b84b03acab00902f1bd96f.gif)



图2 隐藏的结果



  例1是使用`show()`和`hide()`两个方法进行显示与隐藏的切换。在jQuery中还可以使用`toggle()`方法进行这种切换，即如果指定元素是显示，则将其隐藏，如果是隐藏，就将其显示。该方法所带参数与show()方法相同。实现例1的功能，可将源代码中的两个按钮单击事件换成一个按钮单击事件，如下所示：

$(“.btn1”).click(function(){

$("p").toggle(2000);//显示与隐藏切换的方法

});




[]( )2.淡入与淡出

----------------------------------------------------------------------



>   jQuery拥有四种淡入或淡出的方法：`fadeln()`用于淡入已隐藏的元素；`fade Out()`用于淡出可见元素； `fadeToggle ()`可以在`fadeIn（）`与`fadeOut（）`方法之间切换，如果元素已淡出，则 `fadeToggle ()`会向元素添加淡入效果，如果元素已淡入，则 `fadeToggle ()`会向元素添加淡出效艮；`fadeTo()`允许渐变到指定的不透明度。



淡入与淡出方法的语法格式如下所示：

$(selector).fadeIn(speed, callback);

$(selector).fadeOut(speed, callback);

$(selector). fadeToggle (speed, callback);

$(selector).fadeTo(speed, opacity, callback);




  其中，speed和callback参数的含义与show()方法相同；opacity参数指渐变的不透明度，这个不透明度的取值范围是0~1之间的小数，0是完全透明，1是不透明。



  例2在网页中显示一个DIV块，并有四个按钮，分别是显示、隐藏、合成、半透明。单击某个按钮，这个DIV块将显示成指定的样式。  

【例2】

<!doctype html>

jQuery淡入淡出

<input type="button"   id="btnFadeIn"    value="显示"/>

<input type="button"   id="btnFadeOut"   value="隐藏"/>

<input type="button"   id="btnTotal"     value="合成"/>

<input type="button"   id="btnBan"       value="半透明"/>

<div id="div1"></div>




![在这里插入图片描述](https://img-blog.csdnimg.cn/9feceb6ce558497bbc10352338cb404f.gif)



图3 淡入与淡出



[]( )3.向上或向下滑动

------------------------------------------------------------------------



>   可以使用`slideUp()`和`slideDown()`方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，其调用方法的语法格式分别为：

$(selector).slideUp(speed,[callback])

$(selector).slideDown(speed,[callback])




  其中，speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。需要强调的是，`slideDown()`仅适用于被隐藏的元素，对于已经被显示在网页中的元素是没有任何效果的；`slideUp()`则相反。  

  另外， `slideToggle ()`可以在`slideUp()`与`slideDown()`方法之间进行切换。如果元素已经向上滑动并隐藏，则进行向下滑动操作；如果元素已经显示出来，则进行向上滑动操作，使元素隐藏起来。该方法的调用语法格式为：

$(selector).slideToggle(speed,[callback])




  例3是一个仿QQ好友列表的代码。单击好友分类后，会把该分类的好友全部展现出来，再次单击该好友分类时，则把该好友分类折叠起来，在浏览器中折叠与展开好友的页面如图4和图5所示  

。  

【例3】

<!doctype html>

jQuery仿QQ好友列表

<ul class="menu">

 <li class="MenuItem">

   <a href="#" class="subMenuTitle">

     <b>▼</b>好友

   </a>

   <ul class="subMenuItem">

      <li><a href="#">好友1</a></li>

      <li><a href="#">好友2</a></li>

      <li><a href="#">好友3</a></li>

   </ul>

  </li>

  <li class="MenuItem">

     <a href="#" class="subMenuTitle">

       <b>▶</b>朋友

     </a>

     <ul class="subMenuItem">

     <li><a href="#">朋友1</a></li>

     <li><a href="#">朋友2</a></li>

     <li><a href="#">朋友3</a></li>

     <li><a href="#">朋友4</a></li>

    </ul>

  </li>

  <li class="MenuItem">

     <a href="#" class="subMenuTitle">

       <b>▶</b>同学

     </a>

     <ul class="subMenuItem">

        <li><a href="#">同学1</a></li>

        <li><a href="#">同学2</a></li>

     </ul>

  </li>

最后

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

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

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

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

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

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

[外链图片转存中…(img-RrBvZlrU-1715830793328)]

[外链图片转存中…(img-LNBRMix8-1715830793329)]

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

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

2401_84149996

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
六、jQuery动画特效（一）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫