操作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()、hide()、toggle()
滑动slideDown()、slideUp()、slideToggle()
淡入淡出fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画animate()

显示隐藏效果

显示

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: 回调函数,在动画完成时执行的函数,每个元素执行一次。
Last modification:March 1, 2022
如果觉得我的文章对你有用,请随意赞赏