jQuery中的自定义动画animate函数中的step基础的解释

最新推荐文章于 2023-04-20 14:31:33 发布

原创最新推荐文章于 2023-04-20 14:31:33 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了jQuery中animate函数的step选项，详细解释了step函数的两个参数now和fx，以及它们在动画过程中的作用。通过示例展示了step函数如何在每个动画步骤中对每个动画属性进行回调，提供实时的属性变化值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.animate是来实现自定义动画的,共有两种语法结构:

1. .animate( properties [, duration ] [, easing ] [, complete ] )
2. .animate( properties, options )

参见jQuery的API文档

这次讲的就是第二种语法结构中,options众多类型中的一个:step

首先,jQuery API文档这样写:

Step Function
It accepts two arguments (now and fx), and this is set to the DOM element being animated.

//now:一个数字数组,包含第一个参数的几种特性的值;
//是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）
now: the numeric value of the property being animated at each step

//// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素：elem;
// 动画正在改变的属性：prop;
// 正在改变属性的当前值：now;
// 正在改变属性的结束值：end;
// 正在改变属性的单位：unit;等
fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

示例：

$( "li" ).animate({
      opacity: .5,
      height: "50%"
    }, {
      step: function( now, fx ) {
        var data = fx.elem.id + " " + fx.prop + ": " + now;
        $( "body" ).append( "<div>" + data + "</div>" );
      }
});

执行结果如下:

opacity: 1
height: 20
opacity: 0.9413708033732721
height: 23.51775179760368
opacity: 0.900105056331471
height: 25.99369662011174
opacity: 0.854664934384357
height: 28.72010393693858
opacity: 0.7813333083910761
height: 33.12000149653544
opacity: 0.7070177249301477
height: 37.57893650419114
opacity: 0.6471214103487228
height: 41.17271537907663
opacity: 0.6030536869268818
height: 43.8167787843871
opacity: 0.5500788353782273
height: 46.995269877306356
opacity: 0.5213482100503466
height: 48.7191073969792
opacity: 0.5044281873178278
height: 49.73430876093033
opacity: 0.5
height: 50

两个特性的值，轮流弹出