首页 > 代码库 > JQuery基础知识（1）
JQuery基础知识（1）
JQuery基础知识（1）
对JQuery学习中遇到的小细节进行了整理和总结
1、JQuery hide()和show()方法，分别对选中的元素进行隐藏和显示，语法：hide()和show分别有对应的参数，即hide(speed);隐藏的速度进行了限定。hide(1000)/show(1000);
2、JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度。
JQuery的淡入淡出
1、JQuery fadeIn();此方法可以携带不同的参数以控制淡入效果。
语法：
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
2、JQuery fadeOut();携带参数控制淡出效果。
语法：
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
3、JQuery fadeTpggle();携带参数进行淡入淡出切换。
语法：
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
4、JQuery fadeTo()方法允许渐变为给定的不透明度（0-1之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的淡入淡出练习</title>
<script src="http://www.mamicode.com/js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//淡入效果
$("#btnfadeIn").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
//淡出效果
$("#btnfadeOut").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
});
//二者切换
$("#btnfadeToggle").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
//设定不同的透明度
$("#btnfadeTo").click(function(){
$("#div1").fadeTo("slow",0.1);
$("#div2").fadeTo("slow",0.6);
$("#div3").fadeTo("slow",0.3);
});
});
</script>
</head>
<body>
<div>
<p>带不同参数的fadeIn()方法</p>
<input type="button" value="http://www.mamicode.com/淡入效果" id="btnfadeIn" />
<input type="button" value="http://www.mamicode.com/淡出效果" id="btnfadeOut" />
<input type="button" value="http://www.mamicode.com/二者切换" id="btnfadeToggle" />
<input type="button" value="http://www.mamicode.com/给定透明度" id="btnfadeTo" />
<div id="div1" style="width: 100px; height: 100px; background-color: red; display:none;" ></div>
<div id="div2" style="width: 100px; height: 100px; background-color: royalblue; display:none;"></div>
<div id="div3" style="width: 100px; height: 100px; background-color: darkgoldenrod; display:none;"></div>
</div>
</body>
</html>
JQuery基础知识（1）