DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery動畫效果animate和scrollTop結合使用實例
jQuery動畫效果animate和scrollTop結合使用實例
編輯:JavaScript綜合知識     

 animate是jq的一個特效的函數方法,animate() 方法執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。

CSS屬性值是逐漸改變的,這樣就可以創建動畫效果。 只有數字值可創建動畫(比如 "margin:30px")。 字符串值無法創建動畫(比如 "background-color:red")。   代碼如下:$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代碼表示滾動條跳到0的位置,頁面移動速度是800。 結合scrollTop實用示例:  代碼如下: jQuery(document).ready(function($){  $('#shang').click(function(){   $('html,body').animate({scrollTop: '0px'}, 800);  });  $('#comt').click(function(){   $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);  });  $('#xia').click(function(){   $('html,body').animate({scrollTop:$('#footer').offset().top}, 800);  }); }); 表示點擊相關ID移動到指定位置: 點擊ID為shang的元素,回到頂部; 點擊ID為comt的元素,回到ID為comments的位置; 點擊ID為xia的元素,回到底部;  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved