jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题


Posted in jQuery onApril 04, 2017

jQuery中animate()的方法

用于创建自定义动画的函数。

返回值:jQuery animate(params, [duration], [easing], [callback])

如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。paramsOptions一组包

含作为动画属性和终值的样式属性和及其值的集合

params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用的是“hide”、

“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

duration (可选)三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"

callback (可选)Function在动画完成时执行的函数

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毫秒内切换段落的高度和透明度

$("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这两者都加上就可以了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
You might like
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
js倒计时显示实例
2016/12/11 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
基于FME使用Python过程图解
2020/05/13 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
煤矿班组长的职责
2013/12/25 职场文书
学习十八大报告感言
2014/02/04 职场文书
信息管理专业自荐书
2014/06/05 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
募捐感谢信
2015/01/22 职场文书
525心理健康活动总结
2015/05/08 职场文书
爱护环境建议书
2015/09/14 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技