文章目录

• 样式操作
• 操作css样式
• 操作类

• 显示与隐藏
• 上拉与下拉
• 淡入淡出
• 自定义动画

样式操作

操作css样式

$(\"selector\").css(\"attribute\");//获取样式$(\"selector\").css(\"attribute\",\"value\");//设置样式

其中，设置样式时参数可以是一个对象，用来批量设置样式。

操作类

$(\"selector\").addClass(\"classname\");//添加类$(\"selector\").removeClass(\"classname\");//移除类$(\"selector\").toggleClass(\"classname\");//切换类

在原生JS中对类名className的操作会覆盖原类名，而在jQuery中，类操作只是对类名进行操作。现实案例有tab栏切换等。

jQuery常用效果

显示与隐藏

$(\"selector\").show([speed],[easing],[fn]);//显示操作$(\"selector\").hide([speed],[easing],[fn]);//隐藏操作$(\"selector\").toggle([speed],[easing],[fn]);//切换操作

其中，speed参数控制元素显示与隐藏的速度，easing参数控制切换效果，fn则代表回调函数，在元素显示或隐藏后有选择性地触发事件。

上拉与下拉

$(\"selector\").slideDown([speed],[easing],[fn]);//下拉操作$(\"selector\").slideUp([speed],[easing],[fn]);//上拉操作$(\"selector\").slideToggle([speed],[easing],[fn]);//切换操作

现实中的案例有下拉菜单等。

淡入淡出

$(\"selector\").fadeIn([speed],opacity,[easing],[fn]);//淡入操作$(\"selector\").fadeOut([speed],opacity,[easing],[fn]);//淡出操作$(\"selector\").fadeTo([speed],opacity,[easing],[fn]);//通过渐进的方式调整元素的不透明度$(\"selector\").fadeToggle([speed],opacity,[easing],[fn]);//淡入淡出效果切换操作

自定义动画

它的一般代码格式为：

$(\"selector\").animate(params,[s],[e],[f]);//自定义动画

其中，params参数是元素的样式属性，一般为对象的形式。常见的案例有王者荣耀的手风琴效果。

部分参数含义

总结

首先，本期的知识点很多，但都有很多共同点，只要熟练使用一至两种，其他的也极易上手。其次，知识点是死的，人是活的，当我们加入我们自己的思想、逻辑，然后对照代码格式进行操作，也能产生很多有趣的效果。最后，要注意的是，以上这些操作，比如显示隐藏、上拉下拉、淡入淡出等，如果短时间内触发多次，就会形成动画或效果队列，也就是说它必须等待执行完上次的操作才会执行下一次，而等待执行的动画或效果就会形成队列，我们对此的解决方法是加入stop()函数，且必须加在动画或效果之前，这样我们就能在触发下一次操作时，停止上一次的操作。