Show/hide lists using a slide animation?

Question

Hi,

I have a list. When the user performs some action, I want to replace all the list content, but present it as if the new list data is sliding in from right to left, with the old list data being pushed off to the left. Example:

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

now when the user pushes a button for example, I'll have new list content:

<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 slide all the old li elements out from left to right, the jquery-ui hide+slide effect seems to be what I want though:

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

if I can combine that with the show+slide effect, I think I can get it working. I'm wondering though if this is a good solution to pursue, or if there's a simpler way to go? I'm mostly concerned that the slide-in and slide-out animations will have to sync up otherwise it'll look bad,

Thanks

Answer 1

The slight issue you will run into here is the slide animation doesn't queue (not sure who made that brilliant decision), so you'll need to queue yourself, like this:

$("#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. This uses .delay() and .queue() to manually queue the replacement/hide to happen 400ms after the hide begins (400ms is the default duration, change if you give .hide() a different duration). Make sure to call .dequeue() on the end or use .queue(function(n) { ...my stuff... n(); }) so that the animation queue isn't stuck waiting next time.