Bug Tracker


Ticket #13855 (closed bug: fixed)

Opened 12 months ago

Last modified 11 months ago

Problems animating line-height property

Reported by: gpothier@… Owned by:
Priority: low Milestone: 2.0.1
Component: effects Version: 2.0.0
Keywords: Cc:
Blocking: Blocked by:


I have a table with four rows, whose line-height I want to animate with jQuery. I use the following code to shrink and hide the rows:

$("table tr").animate({ 'line-height': 'hide' }, 5000);

But instead of starting to shrink the rows from their current height, it first makes them really huge, and then starts shrinking. Press the Hide button in this fiddle to see it in action:  http://jsfiddle.net/YzCzd/1/

The root of the problem is that jQuery considers line-height a number property, and therefore does not specify the unit when setting the value. It is possible to correctly use hide/show for line-height with the following workaround: $.cssNumberlineHeight? = false;

Change History

comment:1 Changed 12 months ago by timmywil

  • Status changed from new to closed
  • Resolution set to duplicate

Duplicate of #13472.
A ticket is open to document cssNumber.  https://github.com/jquery/api.jquery.com/issues/164

comment:2 Changed 11 months ago by Richard Gibson

  • Resolution changed from duplicate to fixed

Fix #13855: line-height animations. Close gh-1265.

Changeset: 3971c2ebb2e6729fe80bac4ee7b91bc02f26486f

comment:3 Changed 11 months ago by gibson042

  • Milestone changed from None to 2.0.1

comment:4 Changed 11 months ago by dmethvin

  • Priority changed from undecided to low
  • Component changed from unfiled to effects

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


Add a comment

Modify Ticket

as closed

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.