jquery slideDown() does not work but fadeIn() does

Question

I am trying to get slideDown to work. I append some data to a div from a php query. I then want to use slideDown. Instead, it is just appearing. I try fadeIn and the fade animation works. My incoming data already has display:none as its style. Why does my slideDown just show it but fadeIn works?

if($(childTableId).length){
            $(childTableId).remove();
        }else{
            $('#'+rowId).append(data); //Append the incoming PHP table to this div
            $(childTableId).slideDown(1000);
        }

Furthermore if I use slideUp("slow") to hide it (before remove()) I see that it takes a 'slow' amount of time before it disappears. Basically the slide part of the animation is just not happening.

Why are you doing a `remove()` rather than a `hide()` on line 2? — Jon, Jul 02 '14 at 22:09
If the table was already there, I just want to get rid of it. Either way... — user3697407, Jul 02 '14 at 22:09
What happens when you take out the `1000` variable and just use `.slideDown();` — ecnepsnai, Jul 02 '14 at 22:10
Same issue. Also by using hide() I can no longer get the element to re-display. It is display:none forever now. — user3697407, Jul 02 '14 at 22:12
If `$(childTableId).length` is false-y, that means the element doesn’t even exist – so how do you want to `slideDown` a non-existing element in your else branch …? — CBroe, Jul 02 '14 at 22:16
Does data contain a node with that ID for sure? is childTableId actually an ID with the hash prefix or is it a jQuery object? — xd6_, Jul 02 '14 at 22:18
Guys like I said, fadeIn works. Therefore it is appended, is in the DOM, and should slideDown. I believe the answer is because it is a table.. wrapping it in a div now.. — user3697407, Jul 02 '14 at 22:38

score 3 · Answer 1 · answered Jul 02 '14 at 22:15

3

It cannot slideDown() because it doesn't exist.

if($(childTableId).length){
  // If the element exists - remove it from the DOM
  $(childTableId).remove();
} else {
  // The element doesn't exist!
  $('#'+rowId).append(data);
  // By definition ... the element doesn't exist in the DOM, 
  // so it CANNOT be made to appear with slideDown()
  $(childTableId).slideDown(1000);
}

answered Jul 02 '14 at 22:15

Jon

10,678
2
36
48

This isn't necessarily true - if `data` is `
hi
` and childTableId is `#whatever` then he appends it, and it exists again. – dave Jul 02 '14 at 22:18
Again, fadein works. And technically, slideDown is working, just not animating. – user3697407 Jul 02 '14 at 22:37
My mistake then. Although it would have been helpful to know that your `data` contained the table that was previously proven to not exist in your if statement. Glad you found a solution. – Jon Jul 02 '14 at 23:13

score 1 · Accepted Answer · edited May 23 '17 at 12:02

It appears that JQuery cannot perform a animation like slideDown(); or slideUp(); on a <table> element.

Trying this:

<table id="myTable" style="display:none">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ian Spence</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bill Billy</td>
        </tr>
    </tbody>
</table>
<a href="#" onClick="$('#myTable').fadeIn();">Click Me</a>

The table will fade in nicely, but change the fadeIn(); to a slideDown(); and the table just abruptly appears.

Referring to this answer to a similar question:

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

jquery slideDown() does not work but fadeIn() does

2 Answers2