jQuery之效果

jQuery

效果

1)基本
2)滑过
3)淡入淡出
4)自定义
5)设置

基本

show（显示隐藏的匹配元素。）

css代码
<p style="display: none">hello,hehe</p>
jquery代码
$("p").show(); 

动画效果
1)$("p").show("slow");

2)$("p").show("normal");

3)$("p").show("fast");

4)$("p").show(1000,"swing",function(){
	console.log("动画执行完成")
});

hide（隐藏显示的元素。）

css代码
<p>hello,hehe</p>
jquery代码
$("p").hide(); 

动画效果
1)$("p").hide(1000);

2)$("p").hide("slow");

3)$("p").show("normal");

4)$("p").show("fast");

toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。）

css代码
<p>hello,hehe</p>
<input type="button" value="切换" id="btn1">
jquery代码
$("#btn1").click(function(){
	$("p").toggle("normal");
})

另一种（2个或者多个）

function a(){
	alert("hehe1")
}
function b(){
	alert("hehe2")
}
$("p").toggle(a,b); 

滑过

slideDown（通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。）

css代码
<p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换" id="btn1">
jquery代码
$("#btn1").click(function(){
  $("p").slideDown()
});

slideUp（通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。）

css代码
<p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换2" id="btn2">
jquery代码
$("#btn2").click(function(){
  $("p").slideUp()
});

slideToggle（通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
）

css代码
<p style="300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换3" id="btn3">
jquery代码
$("#btn3").click(function(){
  $("p").slideToggle()
});

淡入淡出

fadeIn（通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。）

html代码
	div{
		 200px;
		height: 200px;
		background: red;
		display: none;
	}
css代码
	<input type="button" value="淡入">
	<div></div>
jquery代码
$("input").first().click(function(){
	$("div").fadeIn(5000);
})

fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）

html代码
	div{
		 200px;
		height: 200px;
		background: red;
		display: none;
	}
css代码
	<input type="button" value="淡出">
	<div></div>
jquery代码
$("input").eq(1).click(function(){
	$("div").fadeOut(5000);
})

fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）

html代码
	div{
		 200px;
		height: 200px;
		background: red;
		display: none;
	}
css代码
	<input type="button" value="淡出">
	<div></div>
jquery代码
$("input").eq(1).click(function(){
	$("div").fadeTo(1000,0.5);
})

自定义

animate（用于创建自定义动画的函数。）

html代码
	span{
	 	background: red;
	 	opacity:0;
	 	position: absolute;
	 }
css代码
	<span>123</span>
jquery代码
$("span").animate({
	"width":"300px",
	"opacity":"1",
	"font-size":"3em",
	"height":"100px",
	"left":"300px",
	"top":"100px"
},3000,function(){

	console.log("动画完成")
})