又是一天过去了，今天复习了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', // '100', // height:'400' // }); // }); // }); // animate({params},speed.callback);也可以定义相对值（该值 // 相对于元素的当前值），需要在值的前面就加上 // +=或-= // $(function(){ // $('button').click(function(){ // $('div').animate({ // left:'20px', // '+=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', '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').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; 200px;height: 100px;background-color: red;">World!</div> </body> </html>