Question

I’ve got a relatively basic scenario where I’ve got a nav HTML element that can be expanded (changes the height of the element) based on a couple different triggers and content being slid down inside the nav.

The nav element is position:fixed and reacts to a childs .slideDown() firing.

I have a second element, a floating position:absolute layer, which top css value is dependent on wherever the nav element ends.

So bottom of nav = top of #layer.

The difficulty I am now having is attaching the top position to the bottom of the nav container when the nav height changes.

Is there anything that would allow me to do this?

I have control and hooks over animations and events firing so I could easily attach a function to the animation of the slideDown/Up animation that change the nav height, I just cannot figure out how I can fire a function for each pixel changed.

Any ideas would be much appreciated.

Thanks for reading.

Update

Following advice I rewrote the slideDown to be using the animate function so I could pass a step function like so:

$('.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');
        }
    });
});

Here is the console log output for each step:

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

If you look at the jQuery animate documentation, you will see that there’s a calling form that allows you to pass it a step function that will be called for each step of the animation.

From the 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).

Depending upon the time you set and the speed of your animation, there is no guarantee that the step function will fire for every single pixel, but it will fire for every step of the animation (some of which might be multiple pixels, rather than one).

Here’s a working example of the step function: http://jsfiddle.net/jfriend00/8bKz3/.