Jquery 如何同步多个animate（）实例_Jquery_Width_Jquery Animate_Synchronize

Jquery 如何同步多个animate（）实例

jquery

Jquery 如何同步多个animate（）实例,jquery,width,jquery-animate,synchronize,Jquery,Width,Jquery Animate,Synchronize,我正在尝试同步固定宽度父元素中的多个jQuery animate（）实例。每个子元素都有不同的大小，移动到不同的大小。在animate（）过程中的某个时刻，子对象的大小超过父对象的大小，并显示另一行如何协调子动画，使其不超过父动画的宽度顺便说一句，它不会发生在JSFIDLE上水平滑动 *{边距：0；填充：0} .sm{列表样式：无；宽度：496px；高度：100px；显示：块；溢出：隐藏} .sm li{浮点：左；显示：内联；溢出：隐藏} 1 2 3 4 &拉阔；第1组 &拉阔；第

我正在尝试同步固定宽度父元素中的多个jQuery animate（）实例。每个子元素都有不同的大小，移动到不同的大小。在animate（）过程中的某个时刻，子对象的大小超过父对象的大小，并显示另一行

如何协调子动画，使其不超过父动画的宽度

顺便说一句，它不会发生在JSFIDLE上


水平滑动
*{边距：0；填充：0}
.sm{列表样式：无；宽度：496px；高度：100px；显示：块；溢出：隐藏}
.sm li{浮点：左；显示：内联；溢出：隐藏}

1
2
3
4



&拉阔；第1组
&拉阔；第2组
&拉阔；扯平
$（“#设置1”）。单击（函数（）{
$（“#列表1”）.animate（{width:“200px”}，1500）；
$（“#列表2”）.animate（{width:“150px”}，1500）；
$（“#列表3”）。动画（{width:“96px”}，1500）；
$（“#列表4”）.animate（{width:“50px”}，1500）；
});
$（“#设置2”）。单击（函数（）{
$（“#列表1”）.animate（{width:“50px”}，1500）；
$（“#列表2”）.animate（{width:“96px”}，1500）；
$（“#列表3”）。动画（{width:“150px”}，1500）；
$（“#列表4”）.animate（{width:“200px”}，1500）；
});
$（“#设置3”）。单击（函数（）{
$（“#列表1”）.animate（{width:“124px”}，1500）；
$（“#列表2”）.animate（{width:“124px”}，1500）；
$（“#列表3”）。动画（{width:“124px”}，1500）；
$（“#列表4”）.animate（{width:“124px”}，1500）；
});

“顺便说一句，这不会发生在JSFIDLE上”您使用CSS重置吗？不，我应该吗？我在文章中放置了JSFIDLE链接。不确定这是否是问题所在，但它可能会有所帮助。JSFIDLE自动包含一个。要禁用它，您需要取消选中左侧的*“normalizeCSS”`框。没有区别。。我确实在FF、IE和chrome上使用html文件。根据尺寸的不同，FF更差。。但它们都会在某些方面使用FF在jsfiddle上实现。

<!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>