0

I'm trying to synchronize multiple jQuery animate() instances in a fixed width parent element. Each of the child elements are different sizes moving to different sizes. At some point during the animate(), the sizes of the children exceed the size of the parent and another row is presented..

How can I coordinate the child animates so they do not exceed the parent width ?

BTW it doesn't happen on 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">&raquo; Set 1</button>
    <button id="set2">&raquo; Set 2</button>
    <button id="set3">&raquo; 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>
4

0 回答 0