jquery - 有没有一种方法可以在 jQuery 中对元素进行动画处理，并为高度变化的每个像素触发一个函数？

Question

我有一个相对基本的场景，其中有 nav可以根据几个不同的触发器和在导航内向下滑动的内容来扩展 HTML 元素(更改元素的高度)。

nav元素是 position:fixed并对 child 的 react 使用react .slideDown()开火。

我有第二个元素，一个 float 的 position:absolute层，其中top css 值取决于 nav 的位置元素结束。

所以 nav 的底部= #layer 的顶部.

我现在遇到的困难是附加 top位置为bottom nav的容器时nav高度变化。

有什么可以让我这样做吗？

我可以控制和 Hook 动画和事件触发，因此我可以轻松地将函数附加到 slideDown/Up 的动画中改变nav的动画高度，我只是不知道如何为每个改变的像素触发一个函数。

任何想法将不胜感激。

感谢您的阅读。

更新

根据建议我重写了slideDown使用 animate函数，这样我就可以传递 step功能如下:

$('.sometrigger').click(function() {
    $("nav > ul").animate({
        'height':'show'
    }, {
        duration : 900,
        easing   : 'linear',
        step     : function(e) {
            console.log('step', $(this).height() );
        },
        complete : function() {
            $('nav').removeClass('closed').addClass('open');
        }
    });
});

这是每个步骤的控制台日志输出:

step 72
step 96
step 1
step 2
step 3
step 4
step 5
step 7
step 6
step 8
step 7
step 9
step 8
step 11
step 9
step 12
step 11
step 14
step 12
step 15
step 13
step 17
step 14
step 18
step 15
step 20
step 16
step 21
step 17
step 23
step 18
step 24
step 20
step 26
step 21
step 27
step 22
step 29
step 23
step 30
step 24
step 32
step 25
step 33
step 26
step 35
step 27
step 37
step 29
step 38
step 30
step 39
step 31
step 41
step 32
step 42
step 33
step 44
step 34
step 45
step 35
step 47
step 36
step 48
step 37
step 50
step 39
step 51
step 40
step 53
step 41
step 54
step 42
step 56
step 43
step 57
step 44
step 59
step 45
step 60
step 46
step 62
step 47
step 63
step 48
step 65
step 49
step 66
step 51
step 68
step 52
step 69
step 53
step 71
step 54
step 72
step 55
step 74
step 56
step 75
step 57
step 77
step 58
step 78
step 60
step 80
step 61
step 81
step 62
step 82
step 63
step 84
step 64
step 85
step 65
step 87
step 66
step 88
step 67
step 90
step 68
step 91
step 70
step 93
step 71
step 94

Answer 1

如果你看jQuery animate documentation ，您将看到有一个调用表单，允许您向其传递一个步骤函数，该函数将为动画的每个步骤调用。

来自jQuery documentation :

.animate( properties, options )

properties: A map of CSS properties that the animation will move toward.
options: A map of additional options to pass to the method.

Supported keys:

duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

根据您设置的时间和动画的速度，不能保证步进函数会针对每个像素触发，但它会针对动画的每个步骤触发(其中一些可能是多个像素，而不是一个)。

这是阶跃函数的工作示例:http://jsfiddle.net/jfriend00/8bKz3/ .