Finding out which CSS property is being animated by jQuery

Question

I see that $element.is(':animated') tells me if $element is being animated but is it possible to see which css properties are being animated.

Answer 1

Yes, passing a step function to the animate() call would allow you to find out what property is being animated via fx.prop. Here is an example from the jQuery API docs:

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

The two arguments to the step function are as follows:

now: the numeric value of the property being animated at each step

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 this function runs every "step" of the animation, so it will fire quite often. You could use it to update an array of currently-animating properties or similar.