jQuery 样式操作 与 效果
1、jQuery 样式操作
1.1、操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
（1）参数只写属性名，则是返回属性值
$(this).css(''color'');
（2）参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
（3）参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
Document
1.2、设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
（1）添加类
$(“div”).addClass(''current'');
（2）移除类
$(“div”).removeClass(''current'');
（3）切换类
$(“div”).toggleClass(''current'');
Document
注意：
- 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
Document
1.3、案例：tab 栏切换
思路分析:
- 点击上部的li，当前li 添加current类，其余兄弟移除类。
- 点击的同时，得到当前li 的索引号
- 让下部里面相应索引号的item显示，其余的item隐藏
Document
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价（50000）
- 手机社区
商品介绍模块内容规格与包装模块内容售后保障模块内容商品评价（50000）模块内容手机社区模块内容
2、jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
- 显示隐藏：show() / hide() / toggle() ;
- 划入画出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画：animate() ;
注意：
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
- jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
2.1、显示隐藏效果
显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
语法规范如下:
（1）显示语法规范
show([speed,[easing],[fn]])
显示参数
- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（2）隐藏语法规范
hide([speed,[easing],[fn]])
隐藏参数
- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（3）切换语法规范
toggle([speed,[easing],[fn]])
切换参数
- 参数都可以省略， 无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可。
Document
2.2、滑动效果
（1）下滑效果语法规范
slideDown([speed,[easing],[fn]])
下滑效果参数
- 参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（2）上滑效果语法规范
slideUp([speed,[easing],[fn]])
上滑效果参数
- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（3）滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
滑动切换效果参数
- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
Document
2.3、事件切换
hover([over,]out)
- over:鼠标移到元素上要触发的函数（相当于mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
- 如果只写一个函数，则鼠标经过和离开都会触发它
Document
2.4、动画队列及其停止排队方法
（1）动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
（2）停止排队
stop()
- stop() 方法用于停止动画或效果。
- 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
Document
2.5、淡入淡出效果
（1）淡入效果语法规范
fadeIn([speed,[easing],[fn]])
淡入效果参数
- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（2）淡出效果语法规范
fadeOut([speed,[easing],[fn]])
淡出效果参数
- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（3）淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]])
淡入淡出切换效果参数
- 参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（4）渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
效果参数
- opacity 透明度必须写，取值 0~1 之间。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
Document
2.6、自定义动画 animate
（1）语法
animate(params,[speed],[easing],[fn])
（2）参数
- params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
Document
3、高亮显示案例
4、案例：王者荣耀手风琴效果
思路分析:
- 鼠标经过某个小li 有两步操作：
- 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
- 其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
手风琴案例 
相关资料：链接地址
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！