jQuery slideDown은 마지막으로 삽입 된 목록 항목의 번호를 지우시겠습니까?

Question

안녕하세요. 나는 약간 문제가있다. 일련의 미리 채워진 목록 항목이있는 정렬 된 목록이 있습니다.

<ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ol> 

동적으로 다른 목록 항목을 jQuery와 함께 추가하고 요소를 아래로 밀어 내면 항목은 표시되지만 번호는 표시되지 않습니다. 이 같은 결과 : JQuery와이 작업을 수행 할 수

1. Item 1 
2. Item 2 
3. Item 3 
4. Item 4 
Item 5 

입니다 :

$("ol").append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
l.hide().slideDown(1000); 

어떤 아이디어?

Answer 1

글쎄, 안타깝게도이를 달성하기위한 쉽고 세련된 방법이 있어서는 안됩니다. ,

var ol = $("ol"); 
ol.append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
var h = ol.height(); 
l.hide(); 


ol.animate({ 
    height: h 
}, 1000, function() { 
    l.fadeIn(1000); 
}); 

가 새 목록 항목을 숨기 새로운 높이를 얻을 항목을 추가 새로운 높이로 애니메이션 한 다음 새 목록에 페이드 : 좀 더 미세 조정 후, 나는 충분하다 다른 솔루션을 함께했다 목. 좀 해킹 된 것처럼 보이지만, 비슷한 정도로 작동하는 것처럼 보입니다. 어쩌면 여기에 약간의 애니메이션이 있습니다.

Answer 2

slideDown은 완료되면 목록 항목의 표시를 block으로 변경합니다. 이것은 높이 및 너비 애니메이션이 작동하는 데 필요합니다.

$("ol").append("<li>Item 5</li>"); 
var l = $("ol").children("li:last"); 
l.hide().slideDown(1000, function() { $(this).css("display",""); }); 

를하지만 애니메이션이 끝날 때까지 대기하기 때문에이 이상적이지 보인다

이 작업을 수행하여 문제를 해결할 수 있습니다.

Answer 3

허용되는 경우 fadeIn이 작동합니다. 필자는 테이블/테이블 행과 같은 종류의 문제에 부딪혔다. 애니메이션은 테이블 (그리고 분명히 목록을 나열한 것!)에서 엉망이 될 수 있지만, 페이드 함수가 작동하는 것처럼 보인다.