13

I'm having trouble with .slideup() and .slideDown()

have a look at the following JSFiddle: http://jsfiddle.net/7se2r/4/

Although the row is appearing and disappearing, I'm not seeing the animation of sliding up or down. any clue as to what I'm doing wrong?

TH1981
  • 3,105
  • 7
  • 42
  • 78
  • 1
    There may be an issue with the fact that you are using a table, check this out: http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row – lashleigh Aug 02 '11 at 19:19

5 Answers5

32

With "tbody" you can use .show("slow") and .hide("slow"), but you can't do the sliding animation.

Sliding will work if you try it on a "div" for example.

11101101b
  • 7,679
  • 2
  • 42
  • 52
  • 3
    Beat me to it +1 you can fade the row in/out but you cant slide it because isn't affected by height. – Grahame A Aug 02 '11 at 19:26
  • 1
    I'm new to this site. It looks like you have to be quick to answer! I need to start posting some of my hard questions. Thanks Gallen! – 11101101b Aug 02 '11 at 20:02
  • 3
    I know this is old, but just in case - the animation will also not appear if applying using `display: table;`. – William Orazi Dec 30 '13 at 20:23
7

Also, check you don't have CSS transitions set on your element, or globally to all elements. This will screw with your animations:

* {transition: all 0.1s ease;}
Colin R. Turner
  • 1,323
  • 15
  • 24
  • I was using a div element, so the accepted best answer didn't answer my question. This answer solved my problem. – JCollier Apr 04 '18 at 20:33
4

Can be done if you create a div layer inside your tds and animate that instead. It's not hard to programmatically add divs when creating your table.

Demo: http://jsfiddle.net/jpillora/wU7RV/

jpillora
  • 5,194
  • 2
  • 44
  • 56
  • Bingo. Thanks. I was injecting a new row via ajax and targeting the element with `slideDown()`, but targeting the div inside did the trick. – Milo Persic Apr 21 '22 at 16:38
0

Tbody can't be animated. Try to limit the height of Tbody and you'll see that it doesn't change the height.

avetarman
  • 1,244
  • 9
  • 8
0

Setting the dimensions of a part of a table is only used as the minimum dimension, so the section of the table is immediately visible at full size, and the animation of the height has no effect.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005