动画两个div在同一时间onload，jquery帮助

我想做一个“鳞”的外观，其中两个div将会像在秤上称重一样慢慢动画。我可以使用一些帮助功能，但我不能让两个同时在页面加载动画，我需要他们上去，然后退后，然后等等...有道理？这是我到目前为止，我显然有点新jquery，:) 感谢您的任何帮助！动画两个div在同一时间onload，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>

来源

2009-07-19 thatryan

不知道这应该是一个答案：图像之前的document.ready火灾已加载，不知道这都有影响。另外，请确保包含jquery的权利。 – 2009-07-20 01:47:01

如果你希望他们同时动画，你应该设置queue到false.

来源

2009-07-19 20:59:59 seth

我将队列设置为false，但没有任何更改... – thatryan 2009-07-19 21:42:14

想澄清几件，它的工作原理有点。 :) Jquery正在工作，但是当我加载页面时，所发生的一切就是div类内容div，第一个从底部到顶部。第二个DIV什么也不做......

来源

2009-07-20 04:09:23 thatryan

不要使用答案做跟进。相反，编辑原始帖子或发表评论原帖。 – Soviut 2009-07-20 04:15:46

对不起：（ – thatryan 2009-07-20 06:03:20

我觉得应该有一个分号，而不是在该行的最后一个逗号：

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

这可以解释为什么下一行不会被调用。

来源

2009-07-20 04:20:18 Chris

document.ready不会等待图像下载。所以使用window.onload来代替。如果你想让它们同时动画，你不应该排队。另外，我觉得在你的动画，你需要分别重新设置顶部/底部值，因此它们不会互相干扰......

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

来源

2009-07-20 15:46:13

我想证明你们是我想出了，用来自各方面的帮助。这给我在页面加载“蹒跚蹒跚”效果，但我的问题是，它是否太“蛮力”？有没有更好，更顺畅的方法来做到这一点？

我发布了这个答案，因为这是我迄今为止的答案，我希望没关系。

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

来源

2009-07-21 01:17:10 thatryan

对于任何寻找解决方案的人。 queue: true声明有用，但不是真的，所以我创建了另一个。

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

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

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

做:)

来源

2015-03-28 06:49:38 Thisismint

动画两个div在同一时间onload，jquery帮助

回答

相关问题