固定幅の親要素で複数のjQueryanimate（）インスタンスを同期しようとしています。子要素はそれぞれ異なるサイズであり、異なるサイズに移動します。animate（）のある時点で、子のサイズが親のサイズを超え、別の行が表示されます。
親の幅を超えないように子のアニメーションを調整するにはどうすればよいですか？
ところで、それはJSFiddle、 http： //jsfiddle.net/zeSfe/1では起こりません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Slide</title>
<style>
* {margin:0; padding:0}
.sm {list-style:none; width:496px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<ul id="sm" class="sm">
<li id=list1 ><div style="background-color:red">1<div></li>
<li id=list2><div style="background-color:yellow">2<div></li>
<li id=list3><div style="background-color:blue">3<div></li>
<li id=list4 ><div style="background-color:green">4<div></li>
</ul>
<br/>
<button id="set1">» Set 1</button>
<button id="set2">» Set 2</button>
<button id="set3">» Set Even</button>
<script>
$( "#set1" ).click(function(){
$( "#list1" ).animate( { width: "200px" }, 1500 );
$( "#list2" ).animate( { width: "150px" }, 1500 );
$( "#list3" ).animate( { width: "96px" }, 1500 );
$( "#list4" ).animate( { width: "50px" }, 1500 );
});
$( "#set2" ).click(function(){
$( "#list1" ).animate( { width: "50px" }, 1500 );
$( "#list2" ).animate( { width: "96px" }, 1500 );
$( "#list3" ).animate( { width: "150px" }, 1500 );
$( "#list4" ).animate( { width: "200px" }, 1500 );
});
$( "#set3" ).click(function(){
$( "#list1" ).animate( { width: "124px" }, 1500 );
$( "#list2" ).animate( { width: "124px" }, 1500 );
$( "#list3" ).animate( { width: "124px" }, 1500 );
$( "#list4" ).animate( { width: "124px" }, 1500 );
});
</script></body>
</html>