Question

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

nav元素为position:fixed，并对孩子.slideDown()开火做出反应。

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

nav的底部= #layer的顶部。

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

有什么能让我这样做吗？

我可以控制并挂钩动画和事件，因此我可以轻松地将一个函数附加到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 ：动画将向之移动的CSS属性的地图    options ：传递给方法的其他选项的地图。

支持的密钥：

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

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

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

有没有办法在jQuery中为元素设置动画并为每个高度变化的像素激活一个函数？

1 个答案:

支持的密钥：