jQuery動畫效果animate和scrollTop結(jié)合使用實例
更新時間:2014年04月02日 10:03:45 作者:
animate是jq的一個特效的函數(shù)方法,animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。
CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動畫效果。
只有數(shù)字值可創(chuàng)建動畫(比如 "margin:30px")。
字符串值無法創(chuàng)建動畫(比如 "background-color:red")。
復制代碼 代碼如下:
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
上面的代碼表示滾動條跳到0的位置,頁面移動速度是800。
結(jié)合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);
});
});
表示點擊相關(guān)ID移動到指定位置:
點擊ID為shang的元素,回到頂部;
點擊ID為comt的元素,回到ID為comments的位置;
點擊ID為xia的元素,回到底部;
相關(guān)文章
Jquery之Bind方法參數(shù)傳遞與接收的三種方法
這篇文章主要介紹了Jquery的Bind方法參數(shù)傳遞與接收的三種方法,需要的朋友可以參考下2014-06-06jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03使用jquery的ajax需要注意的地方dataType的設(shè)置
沒有設(shè)置dataType:'json',就出現(xiàn)無法解析返回的data數(shù)據(jù),會把data當作字符串處理,而不是json對象,記得以前是不用設(shè)dataType的,很奇怪,不知道是不是跟jquery版本有關(guān)系2013-08-08