Показать/скрыть списки, используя анимацию слайдов?

Question

У меня есть список. Когда пользователь выполняет какое-либо действие, я хочу заменить все содержимое списка, но представляю его так, как будто новые данные списка перемещаются справа налево, при этом старые данные списка сдвигаются влево. Пример:

<ul id='content'> 
    <li>red</li> 
    <li>green</li> 
</ul> 

теперь, когда пользователь нажимает на кнопку, например, у меня будет новое содержание списка:

<ul id='content'> 
    <!-- 
    replace list item content now. 
    the old red,green items should slide off to the left. 
    the new yellow,purple items should slide in from the right 
    --> 
    <li>yellow</li> 
    <li>purple</li> 
</ul> 

Я не знаю, как я мог скользить все старые элементы Li из слева направо, JQuery-UI скрыть + слайд эффект, кажется, что я хочу, хотя:

http://jqueryui.com/demos/hide/

, если я могу объединить, что с шоу + эффект слайд, я думаю, что я могу GE он работает. Мне интересно, если это хорошее решение для продолжения или если есть более простой способ? Я в основном обеспокоен тем, что вставные и выдвижные анимации будут синхронизировать иначе это будет выглядеть плохо,

Благодаря

Answer 1

Незначительный вопросом вы столкнетесь здесь является slide анимации Безразлично» очередь т (не знаю, кто сделал, что блестящее решение), так что вам придется стоять в очереди самостоятельно, как это:

$("#content").hide('slide').delay(400).queue(function() { 
    //replace then show new items 
    $(this).html("<li>yellow</li><li>purple</li>").show('slide').dequeue(); 
}); 

You can give it a try here. Это использует .delay() и .queue(), чтобы вручную поставить очередь на замену/скрыть на 400 мс после начала скрыть (400 мс - это продолжительность по умолчанию, изменение, если вы даете .hide() a разные продолжительность). Обязательно вызовите .dequeue() в конце или используйте .queue(function(n) { ...my stuff... n(); }), чтобы очередная очередь анимации не застряла в следующий раз.