Show / hide lists using slide animation?

Question

I have a list. When the user performs an action, I want to replace the entire contents of the list, but present it as if the new list data is moving from right to left, while the old list data is shifted to the left. Example:

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

now when the user clicks the button, for example, I will have a new list:

<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>

I'm not sure how I could move all the old li elements from left to right, the jquery-ui hide + slide effect seems to be what I want:

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

show + slide, , . , ? , , ,

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();
});

. .delay() .queue() / 400 (400 - , , .hide() ). .dequeue() .queue(function(n) { ...my stuff... n(); }), .