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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现简单日历效果
Jul 05 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
PHP 开源AJAX框架14种
2009/08/24 PHP
php笔记之常用文件操作
2010/10/12 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
Jquery性能优化详解
2014/05/15 Javascript
js 操作符汇总
2014/11/08 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
freemarker判断对象是否为空的方法
2015/08/13 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Java程序员常见面试题
2015/07/16 面试题
美德少年事迹材料1000字
2014/08/21 职场文书
2014年应急工作总结
2014/12/11 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
八达岭长城导游词
2015/01/30 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js