同时动画两个div onload，jquery帮助答案

【问题标题】：Animating two divs at same time onload, jquery help同时动画两个div onload，jquery帮助
【发布时间】：2009-07-19 20:52:54
【问题描述】：

我正在尝试制作一种“秤”外观，其中两个 div 会像在秤上称重一样缓慢地上下动画。不过，我可以在功能上使用一些帮助，我不能在页面加载时同时让两个动画，我需要它们向上，然后向后，然后向上，等等......有意义吗？这是我到目前为止所拥有的，显然我对 jquery 有点陌生，:) 感谢您的帮助！

<style type='text/css'>
  body {
    background: #262626;    
  }
  .main 
  {
    margin: 20px auto;
    position:relative;    
    height:400px;    
    width:300px; 
  } 
  .content 
  {
    float: left;
    position:absolute; 
    bottom: 10px;   
    left: 100px;
    height:40px;    
    width: 100px;    
  } 
  .content2 
  {
    float: left;
    position:absolute; 
    top: 10px;   
    left: 100px;
    height:40px;    
    width: 100px;    
  }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(".content").animate({top:'10px'},{ queue:true, duration:3000 }),  
        $(".content2").animate({bottom:'10px'},{ queue:true, duration:3000 });          
    });
</script>

<div class="main">
    <div class="content">
        <img src="pixel.png" alt="" />
    </div>
    <div class="content2">
        <img src="functional.png" alt="" />
    </div>
</div>

【问题讨论】：

不知道这是否应该是一个答案：document.ready 在图像加载之前触发，不确定这是否有影响。另外，请确保正确包含 jquery。

标签： javascript jquery html

【解决方案1】：

如果你想让它们同时动画，你应该将queue设置为false.

【讨论】：

【解决方案2】：

document.ready 不等待图像下载。所以改用 window.onload 。如果您希望它们同时制作动画，则不应排队。另外，我认为在您的动画中，您需要分别重置顶部/底部值，这样它们就不会相互干扰......

$(window).load(function() {
  $(".content").animate({top:'10px', bottom:0}, 3000);
  $(".content2").animate({bottom:'10px', top:0}, 3000);
});

【讨论】：

【解决方案3】：

我认为这一行的末尾应该有一个分号而不是逗号：

$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),

这可以解释为什么下一行没有被调用。

【讨论】：

【解决方案4】：

对于任何寻求解决方案的人。 queue: true 语句有点工作，但不是真的，所以我创建了另一个。

如果您正在运行相同的动画，执行命令的最佳方式是将它们放在一个语句中。

使用逗号分隔类/ID。即）.content, .content2.

$(document).ready(function() {
    $(".content, .content2").animate({top:'10px'},{ duration:3000 }),

完成:)

【讨论】：

【解决方案5】：

这是我在各种来源的帮助下得出的结论。这会给我想要的页面加载带来“跷跷板”效果。

<script>$(document).ready(function(){

$("#box1").animate({top:'+=150px'},3000  );
$("#box2").animate({top:'-=150px'},3000 );

$("#box1").animate({top:'-=150px'},3000  );
$("#box2").animate({top:'+=150px'},3000 );

$("#box1").animate({top:'+=100px'},4000  );
$("#box2").animate({top:'-=100px'},4000 );

$("#box1").animate({top:'-=100px'},4000 );
$("#box2").animate({top:'+=100px'},4000 );

$("#box1").animate({top:'+=50px'},5000  );
$("#box2").animate({top:'-=50px'},5000 );

$("#box1").animate({top:'-=20px'},5000 );
$("#box2").animate({top:'+=20px'},5000 );

});
</script>

恐怕这可能太“蛮力”了，但我不知道有更好、更顺畅的方法来做到这一点。

【讨论】：