21.滑动效果 · 程序员开发笔记

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ padding-left: 200px; } #box{ width: 500px; height: 400px; background: dodgerblue; border: 1px solid black; display: none; } </style> </head> <body> <input type="button" value="按钮" id="btn" /> <br /><br /> <div id="box"> 后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。 </div> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btn").click(function(){ //$("#box").slideUp(); //$("#box").slideDown(3000); $("#box").slideToggle(2000); }) </script> <script type="text/javascript"> $("#btn").click(function(){ //让元素通过透明度的变化慢慢的隐藏 //$("#box").fadeOut(3000); //$("#box").fadeIn(3000); //$("#box").fadeToggle(3000); //让#box在两秒钟的时间内,透明度变为0.3 $("#box").fadeTo(2000,0.3); }) </script> </body> </html> stop 是运动到哪里就停在哪里 finish 是停止运动,并且瞬间切换到终止状态