Question

我试图在固定宽度的父元素中同步多个jQuery animate（）实例。每个子元素都有不同的大小，可以移动到不同的大小。在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">&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>

如何同步多个animate（）实例

0 个答案: