jQuery에서 테이블 행의 삭제를 애니메이션합니다
문제
테이블에서 행을 삭제할 때 "슬라이드 업"애니메이션을 사용하기 위해 jQuery 코드를 작성했습니다. 애니메이션이 부드럽게 나타나려면 DIV 태그로 행에있는 각 TD의 내용을 포장하고 DIV에서 SlideUp 함수를 호출하여 애니메이션이 완료되면 실제 TD를 제거했습니다. 이에 대한 코드는 다음과 같습니다.
$("tr[id$=" + rowID + "]").children("td").each(function() {
$(this).children("div").slideUp(function() {
$(this).parent().remove();
});
});
여태까지는 그런대로 잘됐다. 그러나이 코드가 실제 TR을 제거하지 않고 내용 만 제거하지 않으므로 TR을 제거하기 위해 다음 줄을 추가했습니다.
$("tr[id$=" + rowID + "]").remove();
문제는 위의 줄을 추가 한 후 애니메이션이 작동한다는 것입니다. 다시 말해, 행은 단순히 멋진 슬라이딩 효과없이 사라집니다. 왜 이것이 왜 그런지, 어떻게 돌아 다니는 지 아는 사람이 있습니까?
해결책
당신은 제거하고 있기 때문에 tr
여기에는 모든 애니메이션 요소가 포함되어 있습니다. 더 이상 요소도없고 더 이상 애니메이션도 없습니다. 모든 것을 감안할 때 slideUp
s는 같은 시간이 걸리고 마감 콜백을 변경하면서 도망 갈 수 있습니다. $(this).parent().remove()
에게 $(this).closest('tr').remove()
.
다른 팁
나는 당신이 이것을 할 수있는 jQuery 플러그인을 썼습니다. 행을 추가하고 제거 할 수 있으며 DIV 또는 이와 유사한 것으로 데이터를 감싸는 것이 필요하지 않습니다. 확인하십시오 http://www.fletchzone.com/post/jquery-unobtrusially-animated-and-dable-table-rows.aspx
최고,
플레 치