Setting the height of an element with jQuery and updating the inline style for text rotator

Question

Fiddle: http://jsfiddle.net/6jnh0beo/

I'm using a pure CSS text rotator for testimonials and trying to set the height of each testimonial with JS.

var testimonialHeight = $('li.testimonial').outerHeight();
$('ul.rotator').css('height', testimonialHeight);

This works but it only grabs the height of the first testimonial and doesn't update the inline style as the testimonials rotate. Since some of the testimonials are longer than others, it would be ideal if the inline style can update. Is there a way to make sure the inline style is updated for each testimonial?

Answer 1

Hate to break it to you, but your animations don't work in FF..
But on the bright side, I believe that you want to add CSS animation callback events! But be warned, this will venture you into a world of dodgy browser incompatibilities.

$(".rotator>li:last-child").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Another option, although horribly dodgy would be to set an interval to the same time as your CSS animation so that when the animation is supposed to end, it adjusts the height.