又是一天過去了，今天復習了slideDown、slideUp、slideToggle以及animate和stop的用法。
<!DOCTYPE html> <html> <head> <title>滑動和動畫</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // slideDown(speed,callback);用於向下滑動元素。 // $(function(){ // $('#flip').click(function(){ // $('#panel').slideDown(2000); // }) // }) // slideUp(speed,callback);用於向上滑動元素； // $(function(){ // $('#flip').click(function(){ // $('#panel').slideUp(); // }) // }) // slideToggle(speed,callback);切換元素可見狀態。 // $().ready(function(){ // $('#flip').click(function(){ // $('#panel').slideToggle(3000); // }) // }) // animate({params}，speed,callback) // 必需的params參數定義形成動畫的CSS屬性 // 接下來我們吧div元素向右移動300px // 默認情況下所有的HTML元素有一個靜態的位置，且是不可移動的， // 如果需要改變，我們需要將元素的positin屬性設置為relative,fixed和 // absolute. // $(function(){ // $('button').click(function(){ // $('div').animate({left:'300px'},4000); // }) // }) // 我們可以繼續使用animate()來操作多個屬性 // animate()幾乎可以操作所有的css屬性，必需使用camel（峰駝法）格式書寫類似於paddingLeft相關的屬性。 // 同時，色彩顏色並不包含在核心JQuery庫中，如果需要生成顏色動畫，需 // 要下載顏色動畫插件 // $(document).ready(function(){ // $('button').click(function(){ // $('div').animate({ // left:'300', // opacity:'0.2', // width:'100', // height:'400' // }); // }); // }); // animate({params},speed.callback);也可以定義相對值（該值 // 相對於元素的當前值），需要在值的前面就加上 // +=或-= // $(function(){ // $('button').click(function(){ // $('div').animate({ // left:'20px', // width:'+=20', // height:'+=20' // }) // }) // }) // animate()使用預定義的值 // 比如下面的例子高度可以設置成'show','hide','toggle'. // $(function(){ // $('button').click(function(){ // $('div').animate({ // height:'toggle' // }); // }); // }); // 默認情況下，JQuery提供針對動畫隊列功能 // 意味這你在彼此編寫多個anmiate()調用，JQuery會 // 創建包含這些方法調用的‘內部’隊列，然后逐一運行這些animate調用 // 例子1 // $(document).ready(function(){ // $('button').click(function(){ // var div=$('div'); // div.animate({top:'400',opacity:'0.5'}); // div.animate({left:'400',opacity:'0.2'}); // div.animate({top:'40',opacity:'0.5'}); // div.animate({left:'40',opacity:'1'}); // }); // }) // 例子二:先把div移動，然后放大中間字體 $().ready(function(){ $('button').click(function(){ $('div').animate({ top:'50', left:'100', width:'500', height:'300', opacity:'0.3' },3000); $('div').animate({ fontSize:'100' },5000); }); }) </script> <style type="text/css"> #flip,#panel{ padding: 5px; text-align:center; background-color: yellow; border: 1px solid black; } </style> </head> <body> <!-- <div id="flip">點我滑動</div> <div id="panel" style="display: block;height: 300px;line-height: 300px;">Hellow World!!</div> --> <button>開始動畫</button> <div style="position: absolute;width: 200px;height: 200px;background-color: red;">這就是愛愛愛愛！！</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>stop()方法</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#flip').click(function(){ $('#panel').animate({ height:'show' },2000); $('#panel').animate({ fontSize:'30' },2000); }) }); $(function(){ $('#stop').click(function(){ $('#panel').stop(false,false); }) }); // stop(),用於停止動畫效果，在它們完成之前 // stop()方法適用於所有JQuery效果函數，包括滑動，淡入淡出和自定義動畫 // stop(stopAll,goToEnd) // stopAll參數規定是否立即清除當前動畫，默認是false // 即僅停止活動的動畫，准許任何排入隊列的動畫向后執行 // （改為true，則該函數所有動畫暫停,不管是true還是false,第一個動畫已經暫停，控制的是后面隊列的函數） // goToEnd參數規定是否立即完成當前動畫，默認false </script> <style type="text/css"> div{ padding: 5px; text-align:center; background-color: gray; border: 1px solid black; } #panel{ padding: 50px; } </style> </head> <body> <button id="stop">停止滑動</button> <div id="flip">點我向下滑動面板</div> <div id="panel" style="display: none;">Hellow World!</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>案例</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // slideDown用法 // $(function(){ // $('#flip').click(function(){ // $('#panel').slideDown('slow',function(){ // $('#panel').css('opacity','0.3'); // }); // }) // }) // slideUp用法 // $(function(){ // $('#flip').click(function(){ // $('#panel').slideUp('slow'); // }) // }) // slideToggle用法 // $(function(){ // $('#flip').click(function(){ // $('#panel').slideToggle('slow'); // }) // }) // 停止動畫中stop用法 $(function(){ $('#start').click(function(){ $('div').animate({ left:'100px' },4000); $('div').animate({fontSize:'60px'},4000); }) $('#stop').click(function(){ $('div').stop(); }) $('#stop2').click(function(){ $('div').stop(true); }) $('#stop3').click(function(){ $('div').stop(true,true); }) }) </script> <style type="text/css"> div{ padding: 5px; text-align: center; background-color: blue; border: 1px solid black; } #panel{ padding: 50px; } </style> </head> <body> <!-- <div id="flip">點我</div> <div id="panel" style="display: block;">Hellow World!!</div> --> <button id="start">開始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止動畫，但完成動作</button> <div style="position: absolute;width: 200px;height: 100px;background-color: red;">World!</div> </body> </html>