animate 'insertBefore' jquery

Question

Есть ли способ добавить анимацию в 'inserBefore'? У меня есть странное деловое требование, чтобы вкладка в навигации перемещалась из последней позиции справа, в первую позицию слева.

Бизнес хочет, чтобы это было очевидно, когда это происходит, и хотите двигаться в анимированном виде.

Так упрощенный пример это:

Скажи это нав вопросом.

<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 для них).