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 是停止運動,并且瞬間切換到終止狀態