jQTouch animated table cell hight

Question

Hi everybody,

I am using jQTouch to show a table list. When a cell (really a <li> tag in jQTouch) is clicked, I would like to animate the height of the cell down to 0, then hide the element.

I have tried using jquery.animate() for this, and it works on firefox/chrome/opera, but it is super slow on the iPhone.

Does anyone have any idea how to use -webkit-animate (or some iPhone compatible framework, such as jQTouch), to do this?

Thanks, Brett

Answer 1

CSS:

-webkit-transition-property: height;
-webkit-transition-duration: 0.5s;

JS:

$('element').css('height', 0).bind('webkitTransitionEnd', function() {
  $(this).hide();
}); ;