我试图制作一种“鳞片”外观,其中两个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>
答案 0 :(得分:1)
如果您希望同时设置动画,则应将queue
设置为false.
答案 1 :(得分:1)
document.ready
不等待图片下载。所以请改用window.onload。如果你想让它们同时动画,你就不应该排队。另外,我认为在动画中你需要分别重置顶部/底部值,这样它们就不会相互干扰......
$(window).load(function() {
$(".content").animate({top:'10px', bottom:0}, 3000);
$(".content2").animate({bottom:'10px', top:0}, 3000);
});
答案 2 :(得分:0)
我认为在这一行的末尾应该有一个分号而不是一个逗号:
$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),
这可以解释为什么下一行没有被调用。
答案 3 :(得分:0)
以下是我提出的建议,并得到了各方面的帮助。这给我的页面加载带来了“跷跷板”的影响。
<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>
我担心这可能过于“蛮力”,但我不知道有更好,更顺畅的方法。
答案 4 :(得分:0)
对于任何寻找解决方案的人。 queue: true
语句有效,但并非如此,我创建了另一个。
如果您正在运行相同的动画,执行命令的最佳方法是将它们放在一个语句中。
使用逗号分隔班级/ ID。
ie).content, .content2.
$(document).ready(function() {
$(".content, .content2").animate({top:'10px'},{ duration:3000 }),
完成:))