操作css方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

• 参数只写属性名，则是返回属性值

<div class="box" style="width: 300px;height: 300px;background-color:red"></div>
<script>
$(".box").css("background-color")
</script>
>> 'rgb(255, 0, 0)'

• 参数有属性名，属性值，是设置一组样式，属性必须要加引号，但如果是数字可以不用单位和引号

<div class="box" style="width: 300px;height: 300px;background-color:red"></div>
<script>
$(".box").css("background-color","blue").css("background-color")
</script>
>>'rgb(0, 0, 255)'

• 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开

<div class="box" style="width: 300px;height: 300px;background-color:red"></div>
<script>
$(".box").css({"background-color":"blue","width":"500px"})
$(".box").css("background-color")
$(".box").css("width")
</script>

>>'rgb(0, 0, 255)'
>>'500px'

设置样式类

等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不需要加点

添加类

$(this).addClass(''current'');

<div style="width: 300px;height: 300px;background-color:red"></div>
<script>
    $("div").addClass("conter")
</script>

>> <div style="width: 300px;height: 300px;background-color:red"  class="current" ></div>

移除类

$(this).removeClass(''current'');

切换类

$(this).toggleClass(''current'');

jQuery效果

显示隐藏效果

显示

show([speed,[easing],[fn]])

参数

1、参数都可以省略， 无动画直接显示。
2、speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3、easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4、fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏

hide([speed,[easing],[fn]])

参数

1、参数都可以省略， 无动画直接显示。
2、speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3、easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4、fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

显示隐藏切换

toggle([speed,[easing],[fn]])

参数

1、参数都可以省略， 无动画直接显示。
2、speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3、easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4、fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动效果

下滑

slideDown([speed,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

上滑

slideup([speed,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动切换

slidetoggle([speed,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它

动画队列和停止排队方法

动画/效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止排队

stop()

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

淡入淡出

淡入

fadeIn([speed,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

淡出

fadeOut([speed,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

淡入淡出切换

fadeToggle,[easing],[fn]])

参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

指定不透明度

fadeTo([speed,opacity,[easing],[fn]])

参数

（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画

animate(params,[speed,[easing],[fn]])

参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。