jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
jQuery中animate()的方法
用于創(chuàng)建自定義動(dòng)畫的函數(shù)。
返回值:jQuery animate(params, [duration], [easing], [callback])
如果使用的是“hide”、“show”或“toggle”這樣的字符串值,則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。paramsOptions一組包
含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合
params 對(duì)象{},注意:所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left,如果使用的是“hide”、
“show”或“toggle”這樣的字符串值,則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。
duration (可選)三種預(yù)定速度之一的字符串("slow", "normal", or "fast")
或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如:1000)
easing (可選)String要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"
callback (可選)Function在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
animate實(shí)例:
1、點(diǎn)擊按鈕后div元素的幾個(gè)不同屬性一同變化
$("#go").click(function () { $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000); });
2、讓指定元素左右移動(dòng)
$("#right").click(function () { $(".block").animate({ left: '+50px' }, "slow"); }); $("#left").click(function () { $(".block").animate({ left: '-50px' }, "slow"); });
3、在600毫秒內(nèi)切換段落的高度和透明度
$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
4、用500毫秒將段落移到left為50的地方并且完全清晰顯示出來(透明度為1)
$("p").animate({ left: 50, opacity: 'show' }, 500);
5、切換顯示隱藏
$(".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; }); });
//滾動(dòng)焦點(diǎn) $(window).scroll(function () { //當(dāng)前窗口的滾動(dòng)事件 var winTop = $(window).scrollTop(); //獲取當(dāng)前窗口的大小 var objTop = $("#obj1").offset().top; //獲取當(dāng)前對(duì)象的x坐標(biāo) });
下面著重說一下$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
$("body").animate({"scrollTop":top})
不被Firefox支持問題的解決。
其實(shí)是因?yàn)槭褂昧薭ody的:
$("body").animate({"scrollTop":top})
只被chrome支持,而不被Firefox支持。
而使用html的:
$("html").animate({"scrollTop":top})
只被Firefox支持,而不被chrome支持。
如果想讓這段js被chrome和Firefox都支持的話,應(yīng)該這樣:
$("html,body").animate({"scrollTop":top})
看到了嗎,就是將html和body這兩者都加上就可以了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JQuery animate動(dòng)畫應(yīng)用示例
- jQuery封裝animate.css的實(shí)例
- jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例
- jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
- jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加(animate方法)
- jQuery中animate的幾種用法與注意事項(xiàng)
- jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果示例
- 利用jQuery的動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡(jiǎn)單實(shí)例
- 詳解jQuery的animate動(dòng)畫方法及動(dòng)畫排隊(duì)問題解決
相關(guān)文章
jQuery實(shí)現(xiàn)給input綁定回車事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給input綁定回車事件的方法,結(jié)合實(shí)例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下2017-02-02jQuery UI Draggable + Sortable 結(jié)合使用(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query UI Draggable + Sortable 結(jié)合使用(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09jQuery實(shí)現(xiàn)只允許輸入數(shù)字和小數(shù)點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)只允許輸入數(shù)字和小數(shù)點(diǎn)的方法,涉及jQuery針對(duì)鍵盤事件的響應(yīng)及字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03jquery miniui 教程 表格控件 合并單元格應(yīng)用
本文將詳細(xì)介紹jquery miniui 教程 表格控件 合并單元格的應(yīng)用,需要的朋友可以參考下2012-11-11使用jQuery制作Web頁面遮罩層插件的實(shí)例教程
GitHub上人們分享的遮罩層插件也是玲瑯滿目,不過自己動(dòng)手做一個(gè)的話肯定更復(fù)合自己的需求,這里就帶大家來看使用jQuery制作Web頁面遮罩層插件的實(shí)例教程,需要的朋友可以參考下2016-05-05基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件,具有一定的參考價(jià)值,代碼很詳細(xì),感興趣的小伙伴們可以參考一下2016-03-03基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
這篇文章主要介紹了基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除功能,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jquery實(shí)現(xiàn)點(diǎn)擊頁面計(jì)算點(diǎn)擊次數(shù)
這篇文章主要給大家分享了一段使用jquery實(shí)現(xiàn)點(diǎn)擊頁面計(jì)算點(diǎn)擊次數(shù)的代碼,非常實(shí)用,有需要的小伙伴參考下。2015-01-01