jQuery에서 테이블 행 삭제 애니메이션하기

Question

테이블에서 행을 삭제할 때 "slideUp"애니메이션을 사용하기 위해 jQuery 코드를 작성했습니다. 애니메이션이 매끄럽게 보이기 위해서 행의 각 TD의 내용을 DIV 태그로 감싸고 DIV의 slideUp 함수를 호출하여 애니메이션 완료시 실제 TD를 제거했습니다. 그 코드는 다음과 같습니다 :

$("tr[id$=" + rowID + "]").children("td").each(function() { 
    $(this).children("div").slideUp(function() { 
     $(this).parent().remove(); 
    });   
}); 

지금까지 그렇게 좋았습니다. 그러나, 나는이 코드는 단지 그 내용을 실제 TR을 제거하지 않는 것으로 나타났습니다, 그래서 TR을 제거하려면 다음 줄을 추가 :

$("tr[id$=" + rowID + "]").remove(); 

문제는 내가 선 위에서 추가 한 후, 애니메이션을 종료하는 것이있다 일. 즉, 행은 멋진 슬라이딩 효과없이 사라집니다. 아무도 이것이 왜 그렇게인지, 그 문제를 해결하는 방법을 알고 있습니까?

Answer 1

애니메이션 요소가 모두 포함 된 tr을 제거 했으므로 요소가 없으며 애니메이션이 없습니다. slideUp 모두 동일한 시간을 가져야한다고 가정하면 마무리 통화 콜백을 $(this).parent().remove()에서 $(this).closest('tr').remove()으로 변경할 수 있습니다.

Answer 2

나는 이것을 할 수있는 jQuery 플러그인을 작성했다. 행을 추가 및 제거 할 수 있으며 div 등으로 데이터를 래핑 할 필요가 없습니다. 어디 그 줄을 추가 않았다 http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

최고의

플레처