本文介绍如何使用jQuery animate 动画制作浮动层并跟随屏幕滚动
jQuery animate 是 jQuery 库中非常有用的一个函数，它允许开发者以动画的形式改变元素的 CSS 属性。这个函数接受两个主要的参数：一个是包含 CSS 属性和值的映射对象，另一个是可选的动画完成后的回调函数。但是，实际上 animate 函数还有更多的参数，可以让我们更细致地控制动画的行为。
主要js代码与说明
<script type="text/javascript">
$(document).ready(function () {
//获得元素距离上面的高度
var menuYloc = $("#test").offset().top;
//页面发生滚动事件
$(window).scroll(function () {
//定义offsetTop值等于页面滚动的高度加上元素距离上面的高度
var offsetTop = menuYloc + $(window).scrollTop() + "px";
// top: offsetTop CSS 属性和值 duration: 600, 动画持续时间：600 毫秒.queue: false 动画不加入队列
$("#test").animate({ top: offsetTop }, { duration: 600, queue: false });
});
});
</script>jQuery animate 函数的主要参数：
properties: 这是一个包含 CSS 属性和值的对象，定义了动画的效果。例如，{ left: '250px', opacity: '0.5' }。
duration: 动画的持续时间，可以是字符串（如 ‘slow’、’fast’）或毫秒数。默认值是 ‘fast’。
easing: 用于指定动画的缓动函数。缓动函数定义了动画的速度曲线，如 ‘linear’、’swing’ 或其他自定义的缓动函数。默认值是 ‘swing’。
complete: 动画完成后调用的回调函数。这个函数会在动画的最后一帧执行。
step: 一个可选的函数，会在动画的每一帧调用。它允许你自定义动画的每一帧行为。
queue: 一个布尔值，用于决定动画是否应该加入队列。如果设置为 false，动画将立即开始，而不是等待其他队列中的动画完成。默认值是 true。
specialEasing: 一个对象，允许你为动画中的每个属性指定不同的缓动函数。
animate 实例
<script>
$('#test').animate({
left: '50px',
opacity: '0.8'
}, {
duration: 1000, // 动画持续时间：1000 毫秒
easing: 'linear', // 线性缓动函数
complete: function() {
// 动画完成后的回调函数
console.log('Animation complete!');
},
step: function(now, fx) {
// 每一帧调用的函数
console.log('Current CSS value: ' + fx.prop + ': ' + now);
},
queue: false, // 动画不加入队列
specialEasing: {
left: 'easeInQuad', // 左侧动画使用 easeInQuad 缓动函数
opacity: 'easeOutBounce' // 透明度动画使用 easeOutBounce 缓动函数
}
});
</script>
