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