Animer deux divs en même temps, jquery help

Question

J'essaie de faire une sorte de «balance», où deux divs vont lentement s'animer comme pesant sur une balance. Je pourrais utiliser un peu d'aide avec les fonctions s'il vous plaît, je ne peux pas obtenir deux à animer simultanément sur le chargement de la page, et j'ai besoin d'eux pour monter, puis redescendre, puis monter, etc ... Semble-t-il logique? Voici ce que j'ai jusqu'ici, je suis un peu nouveau à jquery évidemment, :) Merci pour toute aide!

<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

Si vous voulez les animés en même temps, vous devez définir queue-false.

Answer 2

voulu clarifier quelques morceaux, il fonctionne un peu. :) Jquery fonctionne, mais quand je charge la page, tout ce qui se passe est div div contenu de la classe, le premier, va de bas en haut. La deuxième div ne fait rien ...

Answer 3

Je pense qu'il devrait y avoir un point-virgule au lieu d'une virgule à la fin de cette ligne:

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

Cela expliquerait pourquoi la ligne suivante n'est pas appelé.

Answer 4

document.ready n'attend pas le téléchargement des images. Utilisez donc window.onload à la place. Et vous ne devriez pas faire la queue si vous voulez qu'ils s'animent simultanément. De plus, je pense que dans l'animation vous devez réinitialiser les valeurs de haut/bas, respectivement, de sorte qu'ils ne gênent pas les uns des autres ...

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

Answer 5

Je voulais vous montrer les gars ce que je suis venu avec, avec aide de diverses sources. Cela donne l'effet "bascule" sur le chargement de la page que je voulais, mais ma question est, est-ce trop de "force brute"? Y a-t-il une meilleure façon de le faire?

Et j'ai posté cela comme une réponse parce que c'est ma réponse jusqu'à présent, j'espère que c'est ok.

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

Pour tous ceux qui recherchent une solution. La déclaration queue: true a fonctionné, mais pas vraiment, j'en ai créé une autre.

Si vous exécutez la même animation, la meilleure façon d'exécuter la commande est de les placer dans une seule instruction.

Utilisez une virgule pour séparer les classes/ID. -à-dire) .content, .content2.

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

fait :)