jQuery特效

jQuery给我们提供了很多特效函数，实现起来也比较简单
在这里简单介绍几个jQuery的特效函数

1.show() , hide()

这两个特效是隐藏和显示。在触发这两个函数时，会将HTML元素从左上角隐藏或者显示
语法：

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

参数：

speed：毫秒，也可以传入slow或者fast
回调函数：特效结束以后执行的函数

	$("#btn1").click(function() {
		$("#div1").hide(1000, function() {
			alert("div隐藏")
		})
	})
	$("#btn2").click(function() {
		$("#div1").show(1000, function() {
			alert("div显示")
		})
	})

2.fadeIn(), fadeOut(), fadeTo()

淡入淡出效果

fadeIn()

$(selector).fadeIn(speed,callback)
淡入元素，默认透明度有0向1变化
参数：

speed：毫秒，也可以传入slow或者fast（可选）
回调函数：特效结束以后执行的函数（可选）

fadeOut()

$(selector).fadeOut(speed,callback)
淡入元素，默认透明度有1向0变化
参数：

speed：毫秒，也可以传入slow或者fast（可选）
回调函数：特效结束以后执行的函数（可选）

fadeTo()

$(selector).fadeTo(speed,opacity,callback)
淡入元素，默认透明度有1向0变化
参数：

speed：毫秒，也可以传入slow或者fast（必需）
opacity:透明度变化，可选值为0-1（必需）
回调函数：特效结束以后执行的函数（可选）

	$(function() {
		$("#btn1").click(function() {
			$("#div1").fadeIn(1000, function() {
				alert("淡入")
			})
		})
		$("#btn2").click(function() {
			$("#div1").fadeOut(1000, function() {
				alert("淡出")
			})
		})
		$("#btn3").click(function() {
			$("#div1").fadeTo(1000, 0.5, function() {
				alert("指定透明度")
			})
		})
	})

3.slideDown(), slideUp()

滑动效果（卷闸门效果），这个特效类似卷闸门的上下，自上而下显示，自下而上隐藏

slideDown()

$(selector).slideDown(speed,callback)
方向：down向下，自上而下放下
参数：

speed：毫秒，也可以传入slow或者fast（可选）
回调函数：特效结束以后执行的函数（可选）

slideUp()

$(selector).slideUp(speed,callback)
方向：up向下，自下而上收起
参数：

speed：毫秒，也可以传入slow或者fast（可选）
回调函数：特效结束以后执行的函数（可选）

	$(function() {
		$("#btn1").click(function() {
			$("#div1").slideDown(1000, function() {
				alert("放下")
			})
		})
		$("#btn2").click(function() {
			$("#div1").slideUp(1000, function() {
				alert("收起")
			})
		})
	})

来源：CSDN

作者：箜懲

链接：https://blog.csdn.net/weixin_42220842/article/details/104723837

标签

jquery

jquery特效