jQuery动画

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tydy9891-/p/9218357.html

文章标签：

#javascript #ViewUI

本文介绍了jQuery中的动画方法如.show(), .hide(), .slideUp(), .fadeIn()/fadeOut()及.animate()等，并详细解释了如何通过.finish()和.stop()来控制动画流程。此外，还提供了提升jQuery性能的十个实用技巧，包括选择器优化、缓存jQuery对象、限制DOM操作次数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##jQuery动画

    .show()显示，括号中有三个参数，可以设置时间

    .hide()隐藏，括号中有三个参数，可以设置时间

    .toggle()原先是显示的点击后就隐藏；原先是隐藏的点击后显示

    .slideUp()从上往下显示

    .fadeIn()/fadeOut()淡入淡出

    .animate()(异步方法)里面设置的属性值必须是数字

**动画停止**

    .finish()停止当前正在运行的动画；清空队列；来到最终匹配的状态
    .stop
      (T(清空队列),T(gotoEnd))来到当前动画的最终状态

      (F,F)不会清空后面的状态以当前点击隐藏的状态执行下一个状态

      (T,F)清空队列，停在当前状态

      (F,T)不会清空队列，会立刻来到最终状态

**jQuery性能优化**

    1.总是从ID选择器开始继承
      例：$("父选择器名子选择器名")
    2.尽量在class前面加上元素名
      例：$("元素名加上选择器名")
    3.尽量使用ID选择器来替代类选择器
    4.在适当的时候尽量使用链式操作
    5.将jQuery对象缓存起来使用,并在变量名前面加上$
      例：let $ps=$("root p");
          for(let i=0;i<$ps.lenth;i++){
                        console.log($ps[i]);

                                       }
    6.限制直接操作DOM的次数
    7.尽量使用事件委托
    8.使用事件委托时应该用on或者delegate方法来替代live
    9.JS代码尽量拖迟到window.onload事件中进行
    10.能用子代选择器就不要用后代选择器