5.1 show()与hide()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>show()与hide()方法</title> <style type="text/css"> body{ font-size:13px;} .artFram{ border:solid 1px #ccc; background-color:#eee; 260px; padding:8px; word-break:break-all;} .artList{ line-height:1.8em;} #showandhide{} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ var $link = $(".artList a"); var $hide = $(".artList :eq(4)"); $link.click(function(){ if($(this).html()=="显示") { $(this).html("隐藏"); $hide.show(); } else { $(this).html("显示"); $hide.hide(); } }) }) </script> </head> <body> <div class="artFram"> <div class="artList"> <span> </span> <br /> <span>111显示显示显示</span> <br> <span id="showandhide" style="display:none;">2222222</span> <br /> <a href="javascript:void(0)">显示</a> </div> </div> </body> </html>
5.2 动画效果的show()与hide()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动画效果的show()与hide()方法</title> <style type="text/css"> body{ font-size:13px;} img{ display:none; cursor:pointer;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ //show(speed,[callback]) //hide(speed,[callback]) $("a").click(function(){ $("img").show(3000,function(){ $(this).css("border","solid 1px #ccc"); }) }) // $("img").click(function(){ $(this).hide(3000); }) }) </script> </head> <body> <a href="javascript:void(0)">显示</a> <img src="img/1.png" /> </body> </html>
5.3 toggle()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>toggle()方法</title> <style type="text/css"> body{ font-size:13px;} .divFrame{ 180px;} .divFrame .divMenu{ float:left;} .divFrame .divContent{ float:right;} .divFrame .divContent img{ display:none;} .btn{ border:#666 1px solid; padding:2px; 80px; margin-bottom:5px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ //--切换元素可见状态,如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态 //toggle() //toggle(switch) //toggle(speed,[callback]) $("input:eq(0)").click(function(){ $("img").toggle(); }) $("input:eq(1)").click(function(){ var intI = 0; var blnA = intI > 1; $("img").toggle(blnA); //blnA--false }) $("input:eq(2)").click(function(){ $("img").toggle(3000,function(){ $(this).css({"border":"solid 1px #ccc","padding":"2px"}); }); }) /*无论是show(),hide(),toggle(),当以动画效果切换页面元素可见状态时,其元素的width,height,padding和margin属性都将以动画的效果展示*/ }) </script> </head> <body> <div class="divFrame"> <div class="divMenu"> <input id="Button1" type="button" value="无参数" class="btn" /><br /> <input id="Button2" type="button" value="逻辑显示" class="btn" /><br /> <input id="Button3" type="button" value="动画显示" class="btn" /> </div> <div class="divContent"> <img src="img/2.png" alt="" /> </div> </div> </body> </html>
5.4 slideDown()与slideUp()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slideDown()与slideUp()</title> <style type="text/css"> body{ font-size:13px;} .divFrame{ 100px; border:solid 1px #666;} .divFrame .divTitle{ padding:5px; background-color:#eee;} .divFrame .divContent{ padding:8px;} .divFrame .divContent img{ border:solid 1px #ccc; padding:2px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //滑动的动画效果就是改变元素的高度 //slideDown(speed,[callback]) --以动画的效果将所选择元素的高度向下增大,呈现一种"滑动"的效果,而元素的其他属性并不发生变化 // [callback] --为动画显示完成后,执行的回调函数... //slideUp(speed,[callback]) -- 以动画的效果将所选择元素的高度向上减小... $(function(){ var blnShow = false; var $Title = $(".divTitle"); var $Tip = $("#divTip"); $Title.click(function(){ if(!blnShow) { $("img").slideUp(3000,function(){ $Tip.html("关闭成功！"); }); $(this).html("显示图片"); blnShow = true; } else { $Tip.html(""); $("img").slideDown(3000); $(this).html("隐藏图片"); blnShow = false; } }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle">隐藏图片</div> <div class="divContent"> <img src="img/3.png" alt="" /> <div id="divTip"></div> </div> </div> </body> </html>
5.5 slideToggle()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slideToggle()方法</title> <style type="text/css"> .divFrame{ border:solid 1px #666; background-color:#eee; padding:5px; 149px;} .divFrame img{ border:solid 1px #eee; padding:2px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(function(){ //slideToggle(speed,[callback]) --以动画的效果切换所选择元素的高度,即:如果高,则减小;如果低,则增大. $(".divFrame").click(function(){ $("img").slideToggle(3000,function(){ $("img").css("border","solid 1px #ccc"); }); }); }) </script> </head> <body> <div class="divFrame"> <img src="img/1.png" alt="" title="111" /> </div> </body> </html>
5.6 fadeIn()和fadeOut()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>fadeIn()和fadeOut()方法</title> <style type="text/css"> .divFrame{ border: solid 1px #666; 188px;text-align: center;} .divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;} .divFrame .divContent{padding: 5px 0px 5px 0px;} .divFrame .divContent img{border: solid 1px #eee;padding: 2px;} .divFrame .divTip{position: absolute;padding: 90px 0px 0px 60px;font-size: 13px;font-weight: bold;} .btn{border: #666 1px solid;padding: 2px; 80px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //fadeIn(speed,[callback]) --通过改变所选元素透明度,实现淡入的动画效果 //fadeOut(speed,[callback]) --通过改变所选元素透明度,实现淡出的动画效果 $(function(){ //fadeIn $("#Button1").click(function(){ $(".divTip").html(""); $("img").fadeIn(3000,function(){ $(".divTip").html("淡入"); }) }) //fadeOut $("#Button2").click(function(){ $(".divTip").html(""); $("img").fadeOut(3000,function(){ $(".divTip").html("淡出"); }) }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" value="fadeIn" class="btn"/> <input id="Button2" type="button" value="fadeOut" class="btn"/> </div> <div class="divContent"> <div class="divTip"></div> <img src="img/1.png" alt="" title=""/> </div> </div> </body> </html>
5.7 fadeTo()方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>fadeTo()方法</title> <style type="text/css"> .divFrame{border: solid 1px #666; 197px;text-align: center;} .divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;} .divFrame .divContent{padding: 5px 0px 5px 0px;} .divFrame .divContent img{border: solid 1px #eee;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> //fadeTo(speed,opacity,[callback]) --将所选择元素的不透明度以动画的效果调整到指定的不透明度值 //opacity --> 0.0-1.0 $(function(){ $("#Select1").change(function(){ var fitValue = $("#Select1").val(); $("img").fadeTo(3000,fitValue); }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <select name="" id="Select1"> <option value="0.2">0.2</option> <option value="0.4">0.4</option> <option value="0.6">0.6</option> <option value="0.8">0.8</option> <option value="1.0" selected="selected">1.0</option> </select> </div> <div class="divContent"> <img src="img/1.png" title=""> </div> </div> </body> </html>