animate()使用方法
语法一、$(selector).animate(styles,speed,easing,callback)
styles:必需。规定产生动画效果的 CSS 样式和值。
$(“p”).animate({margin:“100px”});
speed:可选。规定动画的速度。默认是 “normal”。
毫秒 (比如 1500)、“slow”、“normal”、“fast”
easing:可选。规定在不同的动画点中设置动画速度的 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);
})
语法二、$(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})