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

Question

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

nav 元素是 position:fixed 并对子元素 .slideDown() 触发做出反应。

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

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

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

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

我可以控制和挂钩动画和事件触发，因此我可以轻松地将函数附加到 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 文档，您会看到一种调用形式，允许您向其传递一个步骤函数，该函数将为动画的每个步骤调用。

来自 jQuery 文档：

.animate（属性，选项）

属性：动画将移向的 CSS 属性图。
选项：传递给方法的其他选项的映射。

支持的按键：

duration：确定动画运行时间的字符串或数字。
easing：一个字符串，指示用于过渡的缓动函数。
complete：动画完成后调用的函数。
step：在动画的每个步骤之后调用的函数。
queue：一个布尔值，指示是否将动画放入效果队列中。如果为 false，动画将立即开始。从 jQuery 1.7 开始，队列选项还可以接受字符串，在这种情况下，动画将添加到该字符串表示的队列中。
specialEasing：由properties参数定义的一个或多个CSS属性及其相应的缓动函数的映射（在1.4中添加）。

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

以下是步骤函数的工作示例： http://jsfiddle.net/jfriend00/8bKz3/ 。