Animieren von zwei divs gleichzeitig onload jquery helfen

Ich versuche, eine Art "Schuppen" Aussehen, wo die beiden divs wird langsam animieren, nach oben und unten wie gewogen auf einer Waage. Ich könnte etwas Hilfe verwenden, mit den Funktionen aber bitte, ich kann nicht zwei zu animieren, gleichzeitig auf die Seite laden, und ich muss Sie rauf, dann wieder runter, dann rauf, etc... sinnvoll? Hier ist was ich habe, so weit bin ich irgendwie neue auf jquery offensichtlich 🙂
Vielen Dank für jede Hilfe!!!

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