jQuery學習　二　jQuery 效果

2024-04-27 15:16:57

字體：大中小

來源：轉載

供稿：網友

jQuery學習　二　jQuery 效果二　jQuery 效果(1) 隱藏和顯示 hide() 和 show() 和toggle()1, hide() 和 show()$("button").click(function(){ $("p").hide(1000); //hide(speed）隱藏　speed控制速度，參數為slow、fast 或毫秒});$("button").dblclick(function(){ $("p").show(1000);});2,使用 toggle() 方法來切換 hide() 和 show() 方法，顯示被隱藏的元素，并隱藏已顯示的元素，toggle(speed) speed控制速度，參數為slow、fast 或毫秒<body> <button>隱藏/顯示</button> <p>這是一個文本段落。</p> <p>這是另外一個文本段落。</p></body>$("button").click(function(){ $("p").toggle("slow");});(2) 淡入淡出 speed　可為"slow"、"fast" 或毫秒<body><button>點擊 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body>1,fadeIn(speed) $("button").click(function(){ $("#div1").fadeIn(); //jQuery fadeIn() 用于淡入已隱藏的元素。 $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });2,fadeOut(speed) $("button").click(function(){ $("#div1").fadeOut(); //jQuery fadeOut() 方法用于淡出可見元素。 $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });3,fadeToggle(speed) $("button").click(function(){ $("#div1").fadeToggle(); //jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。 $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });4,fadeTo(speed) fadeTo(speed,opacity) opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); //jQuery fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）。 $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });(3) 滑動 speed控制速度，參數為slow、fast 或毫秒1,slideDown(speed)<body> <div id="flip">點我滑下面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideDown("slow"); //slideDown() 方法用于向下滑動元素。 });2,slideUp(speed)<body> <div id="flip">點我拉起面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideUp("slow"); //slideUp() 方法用于向上滑動元素。 });3,slideToggle(speed)<style type="text/CSS"> #panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}#panel{ padding:50px; display:none;}</style><body> <div id="flip">點我，顯示或隱藏面板。</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideToggle("slow"); //slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。 });(4) 動畫animate({params},speed,callback) 　創建自定義動畫　params 參數定義形成動畫的 CSS 屬性。　speed 的值為"slow"、"fast" 或毫秒。<body> <button>開始動畫</button> <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5',//opacity 屬性設置元素的不透明級別。默認值: 1 css3 元素 height:'150px', width:'150px' }); });(5) 停止動畫 stop() 方法用于在動畫或效果完成前對它們進行停止。<style type="text/css"> #panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}#panel{ padding:50px; display:none;}</style></head><body> <button id="stop">停止滑動</button> <div id="flip">點我向下滑動面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideDown(5000);//slideDown() 方法用于向下滑動元素。 }); $("#stop").click(function(){ $("#panel").stop(); //stop() 方法用于停止動畫或效果，在它們完成之前。 });(6) callback()方法　函數在當前動畫 100% 完成之后執行。以hide(speed,callback)舉例<body> <button>隱藏</button> <p>我們段落內容，點擊“隱藏”按鈕我就會消失</p></body>$("button").click(function(){ $("p").hide('slow',function(){ alert('內容已經隱藏'); });});(7) Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）<body> <p id="p1">W3Cschool教程!!</p> <button>點我</button></body>$("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000);});

本文內容題材摘自w3cschool,為自己的學習文章，非教學文章，后面每天會更新內容，直到學完整個jqury. 如需查看題材來源：http://www.w3cschool.cn/jquery/

上一篇：【CSS】簡易的頁面側邊欄導航

下一篇：jQuery學習　三　jQuery HTML