How to animate table rows while prepending to existing table

Question

I'm prepending the name, tweet and timestamp as a row into an existing HTML table. I'm using codebird-js to get the tweets. My existing code simply prepends the new tweets into the table. But I want to add a slow slidedown animation to the new table rows when they get prepended at the top. The aim is to give an impression to the viewer that the existing rows are pushed down to make room for the new rows. So far been unable to do that. Any help will be appreciated. Thanks in advance.

Here is the HTML

<input type="text" id="tweet-form" placeholder="search text...">
<button id="tweet-button" onclick="showTweets();">Get Tweets</button>

<div id="tweet-rows">
    <table></table>
</div>

The CSS

#tweet-rows {
    display: none;
}

JavaScript

function showTweets() {
    var tweetText = $('#tweet-form').val();
    console.log(tweetText);

    var cb = new Codebird;
    cb.setConsumerKey(
           "CONSUMER_KEY", 
           "CONSUMER_SECRET"
    );

    cb.setToken(
            "ACCESS_TOKEN", 
            "ACCESS_TOKEN_SECRET"
    );

    cb.__call(
        "search_tweets", {
         q : tweetText,
         },
     function (reply) {

       for(var i=reply.statuses.length-1; i>=0; i--) {

         var name = reply.statuses[i].user.name;
         var tweet = reply.statuses[i].text;
         var timestamp = reply.statuses[i].created_at;

         $('#tweet-rows > table').prepend('<tr><td>@' + name + '</td><td>' + tweet + '</td><td>' + timestamp + '</td></tr>');

        //console.log('@' + name + ' : ' + tweet + ' ' + timestamp);

        }

       $('#tweet-rows').show();  

     }, true
    );
}

I've cooked up this fiddle where I've tried to demonstrate the problem.

score 2 · Answer 1 · edited May 23 '17 at 12:34

2

You cannot make a table-row animate unfortunately.

https://stackoverflow.com/a/920480/2702894

Is there any reason for using a table rather than divs?

It is achievable through some 'trickery' but involves:

creating a new table with the content you want to add on one row

adding that table the same number of pixels up as the size of a table row

animating that table down and your existing table at the same speed and time

then at last second removing the new temporary table and prepending the row to your existing table.

Also this still won't give you a fade effect.

As you can see - tricky - divs would be better :-P

edited May 23 '17 at 12:34

Community

1
1

answered Jan 06 '14 at 10:52

GrahamTheDev

22,724
2
32
64

Any fiddle for that use case? I am trying to do something very similar, basically I have it all working except move the existing divs down gracefully. – Astronaut Nov 03 '14 at 20:12
Hi Dan, best thing to do is create a fiddle and post it as a new question - I will keep an eye out for it. If you are using divs and jQuery though you just prepend the div to the container with `.slideDown(500)` say (so `$('#container').prepend('Row HTML IN HERE').hide().slideDown(500);` would work. – GrahamTheDev Nov 03 '14 at 20:28
here is a new fiddle thanks http://stackoverflow.com/questions/26722774/elegantly-animate-a-stack-of-divs – Astronaut Nov 03 '14 at 20:48

score 2 · Answer 2 · answered Jan 06 '14 at 11:00

2

I don't really understand how you want that animation, so I just edited your fiddle a little bit.

http://jsfiddle.net/UQUEU/17/

The effect is done by this piece of code:

$(row).fadeIn("slow");

Is that what you're looking for?

answered Jan 06 '14 at 11:00

Agash Thamo.

748
6
18

If you want a slide down animation, this is impossible with table-rows like Graham Ritchie says, use divs if you want it. – Agash Thamo. Jan 06 '14 at 11:03
I don't want the fade in animation. In effect, I want to reduce the speed of the existing rows moving down when the new row takes the top spot. Anyway, I'll try the animation with divs. Can you give some code example on using divs for this particular case? – saifwilljones Jan 06 '14 at 11:59

How to animate table rows while prepending to existing table

2 Answers2