jQ效果（淡入淡出）

fading方法（淡入淡出）：

1、fadein()， 用于淡入已隐藏的元素

语法：$(selector).fadeIn(speed,callback);

speed 参数规定效果的时长，它可以取："slow"、"fast" 或毫秒；callback 参数是 fading 完成后所执行的函数名称

html：
<button class="btn">点击</button>
<div class="div1" style="width: 50px; height: 50px; background: yellow; display: none;"></div>
<div class="div2" style="width: 50px; height: 50px; background: blue; display: none;"></div>
<div class="div3" style="width: 50px; height: 50px; background: red; display: none;"></div>

　　

jq：
<script>
	//点击淡入div元素
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeIn();
			$("#div2").fadeIn("slow");
			$("#div3").fadeIn(3000);
		});
	});
</script>

　　2、fadeout()，用于淡出可见元素

jq:
<script>
//点击淡出div元素
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeOut();
			$("#div2").fadeOut("slow");
			$("#div3").fadeOut(3000);
		});
	});
</script>	

　　3、fadeToggle()，可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jq：
<script>
//点击淡入淡出
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeToggle();
			$("#div2").fadeToggle("slow");
			$("#div3").fadeToggle(3000);
		});
	});
</script>

　　4、fadeTo()，允许渐变为给定的不透明度（值介于 0 与 1 之间）

语法：$(selector).fadeTo(speed,opacity,callback);

其中，speed和opacity是必需参数

jq：
<script>
//渐变透明度
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeTo("slow",0.15);
			$("#div2").fadeTo("slow",0.3);
			$("#div3").fadeTo("slow",0.8);
		});
	});
</script>

　　

 

转载于:https://www.cnblogs.com/1500418882qqcom/p/10008166.html