在普通的javascript编程中,要实现元素的显示、隐蔽常日是利用其CSS的display属性或者visibility属性。
在jQuery中供应了show()和hide()两个方法,来直接实现元素工具的显示和隐蔽。
jQuery代码：
$(function(){$("input:first").click(function(){ $("p").hide(); //隐蔽});$("input:last").click(function(){ $("p").show(); //显示});});</script>
HTML代码：
<input type="button" value="Hide"> <input type="button" value="Show"><p>点击按钮，看看效果</p><span>一段其它的笔墨</span>
制作多级菜单
jQuery代码:
$(function(){$("li:has(ul)").click(function(e){ if(this==e.target){ //只有点击当前菜单选项时才实行收起子菜单动作 if($(this).children().is(":hidden")){ //如果子项是隐蔽的则显示 $(this).css("list-style-image","url(minus.gif)") .children().show(); }else{ //如果子项是显示的则隐蔽 $(this).css("list-style-image","url(plus.gif)") .children().hide(); } } return false; //避免不必要的事宜混绕 }).css("cursor","pointer").click(); //加载时触发点击事宜 //对付没有子项的菜单，统一设置 $("li:not(:has(ul))").css({ "cursor":"default", "list-style-image":"none" });});</script>
HTML代码:
<ul><li>第1章 Javascript简介</li><li>第2章 Javascript根本</li><li>第3章 CSS根本<ul><li>第3.1节 CSS的观点</li><li>第3.2节 利用CSS掌握页面<ul><li>3.2.1 行内样式</li><li>3.2.2 内嵌式</li></ul></li><li>第3.3节 CSS选择器</li></ul></li><li>第4章 CSS进阶<ul><li>第4.1节 div标记与span标记</li><li>第4.2节 盒子模型</li><li>第4.3节 元素的定位<ul><li>4.3.1 float定位</li><li>4.3.2 position定位</li><li>4.3.3 z-index空间位置</li></ul></li></ul></li></ul>
理解: e.target是引发事宜的元素
this是当前实行事宜句柄的元素,this即是e.currentTarget(在事宜冒泡阶段中确当前DOM元素 )
if(this==e.target)语句浸染。
this指的是定义事宜的所有含有ul的li标签。
e.target指的是触发事宜的工具,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事宜，
以是必须添加判断, 只有点击当前菜单选项时才实行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,
显然是弗成的, 你可以去掉判断看看效果就明白了。
利用toggle()方法实现显隐切换
曾经先容过toggle()方法,该方法接管两个函数作为参数,相互切换;
如果不接管参数,toggle()方法将默认为在show()和hide()之间切换,因此修正上面案列为:
$(function(){ $("li:has(ul)").click(function(e){ if(this==e.target){ //只有点击当前菜单选项时才实行收起子菜单动作 $(this).children().toggle(); $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)")) } return false; //避免不必要的事宜混绕 }).css("cursor","pointer").click(); //加载时触发点击事宜 //对付没有子项的菜单，统一设置 $("li:not(:has(ul))").css({ "cursor":"default", "list-style-image":"none" }); }); 同样利用toggle()方法以上实例也可以进一步简化: 推举利用 jQuery代码: $(function(){ $("li").find("ul").prev().click(function(){ $(this).next().toggle(); }); $("li:has(ul)").find("ul").hide();});
HTML代码:
<div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div>
元素显隐和渐入渐出效果
show(duration,[callback]) duration表示动画实行的韶光是非,可以是表示速率的字符串,包括slow、normal、fast，
也可以是表示韶光的整数(毫秒);callback为可选的回调函数,在动画完成后实行;
jQuery代码：
$(function(){ $("input:first").click(function(){ $("img").hide(3000); //逐渐隐蔽(大小) }); $("input:last").click(function(){ $("img").show(1000); //逐渐显示(大小) });});
HTML代码：
<input type="button" value="Hide"> <input type="button" value="Show"><p><img src="01.jpg"></p>
与show()和hide()方法一样,toggle()方法也可以接管两个参数,制作成动画的效果;
jQuery代码：
$(function(){ $("li").find("ul").prev().click(function(){ $(this).next().toggle(500); //逐渐的显隐 }); $("li:has(ul)").find("ul").hide();});
HTML代码:
<div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div>
利用fadeIn()和fadeOut()方法
fadeIn(duration,[callback]) 渐显(颜色增强)
fadeOut(duration,[callback]) 渐隐(颜色褪色)
个中参数duration和callback与slow()、hide()中的完备相同;
制作逐渐褪色的动画效果:
jQuery代码:
$(function(){ $("input:eq(0)").click(function(){ $("img").fadeOut(3000); //逐渐fadeOut }); $("input:eq(1)").click(function(){ $("img").fadeIn(1000); //逐渐fadeIn }); $("input:eq(2)").click(function(){ $("img").hide(3000); //逐渐隐蔽 }); $("input:eq(3)").click(function(){ $("img").show(1000); //逐渐显示 });});
HTML代码:
<input type="button" value="FadeOut"><input type="button" value="FadeIn"><input type="button" value="Hide"><input type="button" value="Show"><p><img src="02.jpg"></p>
利用fadeTo()方法自定义变幻目标透明度;
jQuery代码:
fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.个中opacity的取值范围为0.0~1.0
$(function(){ $("input:eq(0)").click(function(){ $("img").fadeOut(1000); }); $("input:eq(1)").click(function(){ $("img").fadeIn(1000); }); $("input:eq(2)").click(function(){ $("img").fadeTo(1000,0.5); }); $("input:eq(3)").click(function(){ $("img").fadeTo(1000,0); });});
HTML代码:
<input type="button" value="FadeOut"><input type="button" value="FadeIn"><input type="button" value="FadeTo 0.5"><input type="button" value="FadeTo 0"><p><img src="03.jpg"></p>
当利用fadeOut()方法时,图片完备消逝后将不在占用<p>的空间,
而利用fadeTo(1000,0)时,虽然图片也完备不显示,但仍旧占用着标记<p>的空间
幻灯片效果
slideUp()和slideDown()来仿照PPT中的类似幻灯片拉窗帘的殊效
slideUp(duration,[callback]) 上滑(消逝)
slideDown(duration,[callback]) 下滑(显示)
jQuery代码:
$(function(){$("input:eq(0)").click(function(){$("div").add("img").slideUp(1000); //相称于$("div,img")});$("input:eq(1)").click(function(){$("div").add("img").slideDown(1000);});$("input:eq(2)").click(function(){$("div").add("img").hide(1000);});$("input:eq(3)").click(function(){$("div").add("img").show(1000);});});
HTML代码:
<input type="button" value="SlideUp"><input type="button" value="SlideDown"><input type="button" value="Hide"><input type="button" value="Show"><br><div></div><img src="04.jpg">
停滞所有在指定元素上正在运行的动画。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true, 则清空行列步队。可以立即结束动画。
gotoEnd:让当前正在实行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。
点击Go之后开始动画,点Stop之后会在当前位置停下来
HTML 代码:
<button id="go">Go</button> <button id="stop">STOP!</button><div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button><div class="block"></div>
jQuery 代码:
// 开始动画$("#go").click(function(){$(".block").animate({left: '+200px'}, 5000);});// 当点击按钮后停滞动画$("#stop").click(function(){$(".block").stop();});
实例：阻挡动画播放
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">div{width: 300px;height: 500px;background-color: orange;}</style></head><body><button>动画bug</button><div></div><script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("button").click(function(){//$("div").stop(true).slideToggle(); //stop(true)阻挡重复点击播放//第二种方法我们称之为函数节流//我判断你是否在动画中 如果在我就直接终止代码 如果不在那么久连续/if(div是否在动画中){return;}/console.log($("div").is(":animated"));//这个便是判断div是否在动画过程中if($("div").is(":animated")){return; //函数节流}$("div").slideToggle(3000);})</script></body></html>
delay(duration,[queueName])
设置一个延时来推迟实行行列步队中之后的项目。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">{margin: 0;padding: 0;list-style: none;}fieldset{width: 800px;margin: 0 auto;}ul{margin: 20px;height: 50px;}li{width: 48px;height: 48px;float: left;margin-right: -1px;line-height: 48px;text-align: center;border: 1px solid #000;}</style></head><body><fieldset id=""><legend>殊效</legend><button>┏ (゜ω゜)=☞</button><ul><li>今</li><li>天</li><li>是</li><li>一</li><li>个</li><li>好</li><li>天</li><li>气</li></ul></fieldset><script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("button").click(function(){/$("li:eq(0)").slideToggle(function(){$("li:eq(1)").slideToggle(function(){$("li:eq(2)").slideToggle(function(){$("li:eq(3)").slideToggle(function(){$("li:eq(4)").slideToggle(function(){$("li:eq(5)").slideToggle(function(){$("li:eq(6)").slideToggle(function(){$("li:eq(7)").slideToggle();})});})})})})})//$("li:eq(0)").slideToggle(function(){//上述代码优化为$(this).next().slideToggle(function fn(){$(this).next().slideToggle(fn);})})/$("li").each(function(index,ele){$(this).delay(index400).slideUp()})})</script></body></html>
总结：
1、基本效果
show()：将隐蔽的元素显示
show(speed,[callback]) ：以动画的效果显示
hide()：将显示的元素隐蔽
hide(speed,[callback]) ：以动画的效果隐蔽
toggle()：显示或者隐蔽
toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐蔽
toggle(speed,[callback])：以动画的办法显示或者是隐蔽
参数解释：
speed：速率 单位为毫秒
"slow", 缓慢
"normal", 正常
"fast" 快速
callback：回调函数 当动画实行完毕往后再来实行的函数
2、滑动效果
slideDown()：将隐蔽的元素显示
slideDown(speed,[callback]) ：以动画的办法显示
slideUp()：将显示的元素隐蔽
slideUp(speed,[callback]) ：以动画的办法隐蔽
slideToggle()：隐蔽或显示
slideToggle(speed,[callback])：以动画的办法隐蔽或者显示
参数解释：
speed：速率 单位为毫秒
"slow", 缓慢
"normal", 正常
"fast" 快速
callback：回调函数 当动画实行完毕往后再来实行的函数
3、淡入淡出
fadeIn()：淡入
fadeIn(speed,[callback]) ：以动画的办法进行淡入
fadeOut()：淡出
fadeOut(speed,[callback])：以动画的办法进行淡出
fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值
opacity：透明度 取值：0-1之间 0表示完备透明 1表示不透明
callback：回调函数 当动画实行完毕往后再来实行的函数
show() 显示元素 hide()隐蔽元素 toggle()显示和隐蔽切换
fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换
slideUp() 幻灯片上滑(消逝) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换
4 停滞所有在指定元素上正在运行的动画。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true, 则清空行列步队。可以立即结束动画。
gotoEnd:让当前正在实行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。
