Jquery中文網 www.prqmtc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery動畫效果animate和scrollTop結合使用實例

jQuery動畫效果animate和scrollTop結合使用實例

發布時間:2014-08-09   編輯:www.prqmtc.live
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的元素,回到底部;

您可能感興趣的文章:
jQuery動畫效果animate和scrollTop結合使用實例
Jquery 自定義動畫概述及示例
jQuery動畫animate方法使用介紹
JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
jQuery創建平滑的頁面滾動(頂部或底部)
jquery 跳到頂部和底部動畫2句代碼簡單實現
jQuery Animation實現CSS3動畫示例介紹
jquery animate 動畫效果使用說明
使用jQuery實現的擲色子游戲動畫效果
基于jquery的動畫效果代碼

關鍵詞: jQuery  animate  scrollTop   
[關閉]
一分赛车计划app