Анимация 'insertBefore' jquery

Есть ли способ добавить анимацию в "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");

Ответ 1

Вы можете сделать это следующим образом:

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

Вы можете протестировать его здесь, они должны сделать .insertBefore() после завершения анимации, выполнив ее в обратном вызове. Это один из нескольких вариантов анимации, например, вы можете использовать любой из эффектов здесь (вам нужно будет включить JQuery UI для них).

Ответ 2

Попробуйте это, посмотрите, можете ли вы отредактировать анимацию, чтобы сделать то, что хотите.

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