Determining which CSS property is animated by jQuery

Question

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

Answer 1

Yes, passing the step function to animate () will let you know which property is being animated via fx.prop . The following is an example from 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>'); } }); 

Two arguments to the step function:

now : the numerical value of the property that animates at each step

fx : reference to the jQuery.fx prototype jQuery.fx , 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 animated property.

Please note that this function launches each "step" of the animation, so it works quite often. You can use it to update an array of current animation properties or the like.