定制app开发jQuery中animate()的方法

animate()使用方法

语法一、$(selector).animate(styles,speed,easing,callback)
styles：必需。定制app开发规定产生动画效果的 CSS 样式和值。
$(“p”).animate({margin:“100px”});
speed：可选。定制app开发规定动画的速度。默认是 “normal”。
毫秒 （比如 1500）、“slow”、“normal”、“fast”
easing：可选。定制app开发规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：swing、linear
callback：可选。animate 函数执行完之后，要执行的函数。

var $scrollTop = $(ele).offset().top; //获取对应元素顶部高//点击某块到对应元素ele的位置上$('body,html').animate({ scrollTop: $scrollTop }, 1000);$('#top').on('click',function(){ //回顶部     $('body,html').animate({ scrollTop: 0 }, 1000);}）
1
2
3
4
5
6
7

语法二、$(selector).animate(styles,options)
styles：必需。规定产生动画效果的 CSS 样式和值。
options：可选。规定动画的额外选项。
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中
放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

animate()不被Firefox支持问题的解决

• 使用body标签，如$(“body”).animate({“scrollTop”:top})，只被chrome支持，而不被Firefox支持。
• 使用html标签，如$(“html”).animate({“scrollTop”:top})，只被Firefox支持，而不被chrome支持。

如果想让这段js被chrome和Firefox都支持的话，应该这样：

$("html,body").animate({"scrollTop":top})
1