jQuery에서 테이블 행의 삭제를 애니메이션합니다

StackOverflow https://stackoverflow.com/questions/1303343

  •  19-09-2019
  •  | 
  •  

문제

테이블에서 행을 삭제할 때 "슬라이드 업"애니메이션을 사용하기 위해 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 여기에는 모든 애니메이션 요소가 포함되어 있습니다. 더 이상 요소도없고 더 이상 애니메이션도 없습니다. 모든 것을 감안할 때 slideUps는 같은 시간이 걸리고 마감 콜백을 변경하면서 도망 갈 수 있습니다. $(this).parent().remove() 에게 $(this).closest('tr').remove().

다른 팁

나는 당신이 이것을 할 수있는 jQuery 플러그인을 썼습니다. 행을 추가하고 제거 할 수 있으며 DIV 또는 이와 유사한 것으로 데이터를 감싸는 것이 필요하지 않습니다. 확인하십시오 http://www.fletchzone.com/post/jquery-unobtrusially-animated-and-dable-table-rows.aspx

최고,

플레 치

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top