animate 'insertBefore'jquery

Question

'inserBefore'에 애니메이션을 추가하는 방법이 있습니까? 내비게이션의 탭을 오른쪽의 마지막 위치에서 왼쪽의 첫 번째 위치로 이동 시키려면 비즈니스 요구 사항이 이상합니다.

비즈니스에서는 이러한 일이 발생했을 때와 애니메이션 방식으로 이동하려는 경우가 분명하기를 원합니다.

단순화 된 예는 다음과 같습니다.

이것이 문제의 Nav라고 말하십시오.

<ul id="test"> 
    <li>First Item</li> 
    <li>Second Item</li> 
    <li>Third Item</li> 
    <li>Fourth Item</li> 
    <li>LAST Item</li> 
</ul> 

아래의 동작을 애니메이션으로 만들 수있는 방법은 없나요?

$("li:last").insertBefore("li:first"); 

Answer 1

원하는대로 애니메이션을 편집 할 수 있는지 확인하십시오.

$('li:last') 
    .animate({height:'toggle'},200) 
    .insertBefore('li:first') 
    .animate({height:'toggle'},200); 

Answer 2

당신은 이런 식으로 작업을 수행 할 수 있습니다

$("li:last").slideUp(function() { 
    $(this).insertBefore("li:first").slideDown(); 
})​;​ 

You can test it here, 그들은 키는 애니메이션이 콜백을 수행하여 완료 후 .insertBefore()을하는 것입니다. 이 중 하나는 애니메이션 옵션입니다. 예를 들어 any of the effects here을 사용할 수도 있습니다 (이 경우 jQuery UI를 포함해야합니다).