기존 테이블 앞에 추가하는 동안 테이블 행에 애니메이션을 적용하는 방법

Question

기존 HTML 테이블에 이름, 짹짹 및 타임 스탬프를 행으로 추가합니다. 나는 codebird-js를 사용하여 트윗을 얻는다. 기존의 코드는 단순히 새 트윗을 테이블에 추가합니다. 그러나 새로운 테이블 행이 맨 앞에 추가 될 때 느린 슬라이딩 애니메이션을 추가하려고합니다. 새로운 행을위한 공간을 만들기 위해 기존 행이 푸시 다운되었음을 뷰어에게 알려주는 것이 목표입니다. 지금까지 그렇게 할 수 없었습니다. 어떤 도움을 주시면 감사하겠습니다. 미리 감사드립니다.

다음은 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> 

내가 문제를 보여주기 위해 노력했습니다이 fiddle을 요리 한

#tweet-rows { 
    display: none; 
} 

자바 스크립트

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 
    ); 
} 

CSS는 것입니다.

Answer 1

불행히도 테이블 행의 애니메이션을 만들 수 없습니다. div가 아닌 테이블을 사용하는 어떤 이유는

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

있습니까?

그것은 약간의 '속임수'를 통해 달성 할 수 있지만, 포함 :

최대의 크기는 하나 개의 행이 테이블에게 동일한 수의 픽셀을 추가

에 추가 할 콘텐츠와 새로운 테이블을 생성 테이블 행

아래 해당 테이블을 애니메이션과 초 마지막으로 새로운 임시 테이블을 제거하고 기존 테이블에 행을 붙이는에서 다음 같은 속도와 시간

에서 기존 테이블.

또한 여전히 페이드 효과가 적용되지는 않습니다. 당신이 볼 수 있듯이

은 - 까다로운 - div가 정말 당신이 애니메이션을 방법을 이해하지 않습니다 - P

Answer 2

좋을 것이다, 그래서 당신의 바이올린 조금 편집.

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

은 당신이 찾고있는 무엇인가요 :

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

효과는이 코드 조각에 의해 이루어집니다?