jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
jQuery中animate()的方法
用于創(chuàng)建自定義動畫的函數(shù)。
返回值:jQuery animate(params, [duration], [easing], [callback])
如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認的動畫形式。paramsOptions一組包
含作為動畫屬性和終值的樣式屬性和及其值的集合
params 對象{},注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left，如果使用的是“hide”、
“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認的動畫形式。
duration (可選)三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing (可選)String要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing"
callback (可選)Function在動畫完成時執(zhí)行的函數(shù)
animate實例：
1、點擊按鈕后div元素的幾個不同屬性一同變化
$("#go").click(function () {
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000);
});
2、讓指定元素左右移動
$("#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;
});
});
//滾動焦點
$(window).scroll(function () { //當前窗口的滾動事件
var winTop = $(window).scrollTop(); //獲取當前窗口的大小
var objTop = $("#obj1").offset().top; //獲取當前對象的x坐標
});
下面著重說一下$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
$("body").animate({"scrollTop":top})
不被Firefox支持問題的解決。
其實是因為使用了body的：
$("body").animate({"scrollTop":top})
只被chrome支持，而不被Firefox支持。
而使用html的：
$("html").animate({"scrollTop":top})
只被Firefox支持，而不被chrome支持。
如果想讓這段js被chrome和Firefox都支持的話，應該這樣：
$("html,body").animate({"scrollTop":top})
看到了嗎，就是將html和body這兩者都加上就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
- JQuery animate動畫應用示例
- jQuery封裝animate.css的實例
- jquery animate動畫持續(xù)運動的實例
- jQuery animate()實現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 淺談原生JS實現(xiàn)jQuery的animate()動畫示例
- jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）
- jQuery中animate的幾種用法與注意事項
- jQuery使用animate實現(xiàn)ul列表項相互飄動效果示例
- 利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
- 原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
- 詳解jQuery的animate動畫方法及動畫排隊問題解決
相關文章
最近項目中遇見 Jquery Ajax 緩存問題,load出來的頁面狀態(tài)有時正常，有時不對，記錄一下，希望對大家有幫助2011-05-05![jQuery 判斷是否包含在數(shù)組中Array[]的方法](http://img.jbzj.com/images/xgimg/bcimg1.png)
jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)硪黄猨Query 判斷是否包含在數(shù)組中Array[]的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家介紹了JQuery選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
jquery中html、val與text三者屬性取值的聯(lián)系與區(qū)別介紹
本文為大家詳細介紹下jquery中，html、val與text三者屬性取值的聯(lián)系與區(qū)別，下面有個不錯的示例，感興趣的朋友不要錯過2013-12-12
下面小編就為大家?guī)硪黄猨query實現(xiàn)用戶登陸界面(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Jquery中request和request.form和request.querystring的區(qū)別
Request.Form是獲取以POST方式提交的表單數(shù)據(jù),Request.QueryString主要是獲取地址欄參數(shù)或者以Get方式提交的數(shù)據(jù),而Request則包含以上兩種方式，會在Request.QueryString和Request.Form中都查詢一遍變量2015-11-11
jQuery1.6中新添加了一個prop方法，看起來和用起來都和attr方法一樣，這兩個方法有什么區(qū)別呢？這要從HTMl 的attribute與property區(qū)別說起，attr與prop正是這兩個東西的縮寫2013-10-10
這篇文章主要為大家詳細介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要簡單介紹了jquery事件處理，十分的實用，有需要的小伙伴可以參考下。2015-04-04
一般元素下的多個指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動態(tài)控制,就需要用到jquery的filter()方法2023-08-08