Анимация двух div одновременно в режиме onload, jquery help

Question

Я пытаюсь сделать что-то вроде «весов», где два делителя будут медленно анимироваться вверх и вниз, как будто они взвешиваются в масштабе. Я мог бы использовать некоторую помощь с функциями, хотя, пожалуйста, я не могу заставить две анимировать одновременно при загрузке страницы, и мне нужно, чтобы они поднимались, потом опускались, потом поднимались и т. Д. Имеет смысл? Вот то, что у меня есть, я новичок в 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>

Answer 1

document.ready не ждет загрузки изображений. Так что используйте вместо этого window.onload. И вам не следует стоять в очереди, если вы хотите, чтобы они оживляли одновременно. Кроме того, я думаю, что в вашей анимации вам необходимо соответственно сбросить верхнее / нижнее значения, чтобы они не мешали друг другу ...

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

Answer 2

Если вы хотите, чтобы они анимировались одновременно, вы должны установить queue на false.

Answer 3

Для тех, кто ищет решение. Оператор queue: true работал, но не совсем, поэтому я создал другое.

Если вы запускаете ту же анимацию, лучший способ выполнить команду - поместить их в один оператор.

Используйте запятую для разделения классов / идентификаторов. т.е.) .content, .content2.

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

сделано:)

Answer 4

Вот то, что я придумал, с помощью различных источников. Это дает эффект "колебания" на загрузку страницы, на который я рассчитывал.

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

Боюсь, это может быть слишком "грубой силой", но я не знаю лучшего, более плавного способа сделать это.

Answer 5

Я думаю, что в конце этой строки должна быть точка с запятой вместо запятой:

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

Это объясняет, почему не вызывается следующая строка.