又是一天过去了，今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。
<!DOCTYPE html> <html> <head> <title>滑动和动画</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // slideDownspeed,callback);用于向下滑动元素。 // $function){ // $'#flip').clickfunction){ // $'#panel').slideDown2000); // }) // }) // slideUpspeed,callback);用于向上滑动元素； // $function){ // $'#flip').clickfunction){ // $'#panel').slideUp); // }) // }) // slideTogglespeed,callback);切换元素可见状态。 // $).readyfunction){ // $'#flip').clickfunction){ // $'#panel').slideToggle3000); // }) // }) // animate{params}，speed,callback) // 必需的params参数定义形成动画的CSS属性 // 接下来我们吧div元素向右移动300px // 默认情况下所有的HTML元素有一个静态的位置，且是不可移动的， // 如果需要改变，我们需要将元素的positin属性设置为relative,fixed和 // absolute. // $function){ // $'button').clickfunction){ // $'div').animate{left:'300px'},4000); // }) // }) // 我们可以继续使用animate)来操作多个属性 // animate)几乎可以操作所有的css属性，必需使用camel（峰驼法）格式书写类似于paddingLeft相关的属性。 // 同时，色彩颜色并不包含在核心JQuery库中，如果需要生成颜色动画，需 // 要下载颜色动画插件 // $document).readyfunction){ // $'button').clickfunction){ // $'div').animate{ // left:'300', // opacity:'0.2', // '100', // height:'400' // }); // }); // }); // animate{params},speed.callback);也可以定义相对值（该值 // 相对于元素的当前值），需要在值的前面就加上 // +=或-= // $function){ // $'button').clickfunction){ // $'div').animate{ // left:'20px', // '+=20', // height:'+=20' // }) // }) // }) // animate)使用预定义的值 // 比如下面的例子高度可以设置成'show','hide','toggle'. // $function){ // $'button').clickfunction){ // $'div').animate{ // height:'toggle' // }); // }); // }); // 默认情况下，JQuery提供针对动画队列功能 // 意味这你在彼此编写多个anmiate)调用，JQuery会 // 创建包含这些方法调用的‘内部’队列，然后逐一运行这些animate调用 // 例子1 // $document).readyfunction){ // $'button').clickfunction){ // 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移动，然后放大中间字体 $).readyfunction){ $'button').clickfunction){ $'div').animate{ top:'50', left:'100', '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; 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').clickfunction){ $'#panel').animate{ height:'show' },2000); $'#panel').animate{ fontSize:'30' },2000); }) }); $function){ $'#stop').clickfunction){ $'#panel').stopfalse,false); }) }); // stop),用于停止动画效果，在它们完成之前 // stop)方法适用于所有JQuery效果函数，包括滑动，淡入淡出和自定义动画 // stopstopAll,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').clickfunction){ // $'#panel').slideDown'slow',function){ // $'#panel').css'opacity','0.3'); // }); // }) // }) // slideUp用法 // $function){ // $'#flip').clickfunction){ // $'#panel').slideUp'slow'); // }) // }) // slideToggle用法 // $function){ // $'#flip').clickfunction){ // $'#panel').slideToggle'slow'); // }) // }) // 停止动画中stop用法 $function){ $'#start').clickfunction){ $'div').animate{ left:'100px' },4000); $'div').animate{fontSize:'60px'},4000); }) $'#stop').clickfunction){ $'div').stop); }) $'#stop2').clickfunction){ $'div').stoptrue); }) $'#stop3').clickfunction){ $'div').stoptrue,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; 200px;height: 100px;background-color: red;">World!</div> </body> </html>