SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<button>Replace</button>
<div style="width: 100px">
  <ul id='content'>
    <li>red</li>
    <li>green</li>
  </ul>
</div>

CSS

#content { width: 100px; border: solid 1px #ddd;  }

JavaScript

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