The jQuery 1.7 .animate() method and percentages

November 13, 2011


This post was originally published in the Rambling Labs Blog on November 13, 2011.


As you may know, the jQuery Rambling Slider contains several animations. Some of them depend on changing the height of a div using percentages. Like this one:

slice.animate { height: '100%', opacity: '1.0' }, settings.speed

The problem with this is that with jQuery 1.7, the ‘100%’ was getting parsed to just ‘100’, so the height ended up being ‘100px’.

Thankfully, there’s an easy workaround:

slice.animate { height: "#{slider.height()}px", opacity: '1.0' }, settings.speed

In this case, the slider is the container for the slice. So I just made the slice’s height to be animated to the slider’s total height instead of using percentages.

I submitted a bug to the jQuery bug tracker, but it got closed almost instantaneously because there is already a fix for this, scheduled to be included in jQuery 1.7.1.

Anyways, I think I won’t be using percentages anymore. :P