jQuery animate效果演示_JQuery特效代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery animate效果演示

jQuery animate效果演示

編輯：JQuery特效代碼

animate(params[,duration[,easing[,callback]]])
用於創建自定義動畫的函數。<br />
這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。
注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調用默認的動畫形式。

運行以後，刷新下，主要遠程js文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <title>FV.Zone jQuery demos...</title> <script type="text/javascript"> $(document).ready(function(){ $(".box h3").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); $(this).addClass("arrow"); return false; },function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); $(this).removeClass("arrow"); return false; }); }); </script> <style> /* 初始化樣式 */ div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;} h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} h1 { margin: 42px 0 20px; font-size: 18px; text-align: center; } .clear { clear: both; } a { color:#000; text-decoration: none; } a:hover { color:#999; text-decoration: none; } body { margin: 0 auto; width: 960px; background: #282c2f; color: #d1d9dc; font: 12px 'Lucida Grande', Verdana, sans-serif; } #layout { margin: 0 auto; width: 280px; } .text { line-height: 22px; padding: 0 6px; color:#666; } .box h3 { font-size: 12px; padding-left: 6px; line-height: 22px; background: #99CC00 url(arrow.gif) no-repeat right -17px; font-weight:bold; color:#fff; border: 1px solid #669900; height:22px; } .arrow { background: #99CC00 url(arrow.gif) no-repeat right 5px; } .box h3 a { color:#fff; } .box h3 a:hover { color:#eee; } .box { position: relative; background: #363C41; border: 5px solid #4A5055; } .ar { line-height: 22px; position: absolute; top: 3px; right: 6px; display: block; width: 16px; height: 16px; } </style> </head> <body> <h1>jQuery demos animate(params[,duration[,easing[,callback]]])</h1> <div id="layout"> <div class="box"> <h3><span>fdsfds<a href="#" class="ar"></a></span></h3> <div class="text"> animate(params[,duration[,easing[,callback]]]) 用於創建自定義動畫的函數。這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如"height"、"top"或"opacity"）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是"hide"、"show"或"toggle"這樣的字符串值，則會為該屬性調用默認的動畫形式。 </div> </div> <div class="box"> <h3>fdsfds<a href="#" class="ar"></a></h3> <div class="text"> 在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。 </div> </div> </div>  </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:Jquery 設置標題的自動翻轉
下一頁:jquery 模式對話框終極版實現代碼下載

JQuery特效代碼

14個有用的Jquery技巧分享: 1.通過方法返回Jquery對象實例用 var someDiv = $(‘#someDiv).hid
文件編碼導致jquery失效的解決方法: 在使用jquery編寫圖片滾動效果時，發現必須把圖片滾動部分放到單獨的頁面裡，然後在首頁用<i
jQuery 瀑布流絕對定位布局（二）(延遲AJAX加載圖片): 瀑布流-絕對定位布局，與浮動布局的區別在於 1.布局不一樣：　　絕對定位：一個UL裡面放置所有的絕

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章