I am trying to make a sort of "scales" look, where two divs will slowly animate up and down like being weighed on a scale. I could use some help with the functions though please, I can not get two to animate simultaneously on page load, and I need them to go up, then back down, then up, etc... Make sense? Here is what I have so far, I am kinda new to jquery obviously, :) Thanks for any help!

<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=".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>

I am trying to make a sort of "scales" look, where two divs will slowly animate up and down like being weighed on a scale. I could use some help with the functions though please, I can not get two to animate simultaneously on page load, and I need them to go up, then back down, then up, etc... Make sense? Here is what I have so far, I am kinda new to jquery obviously, :) Thanks for any help!

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 19, 2009 at 21:40 Darko 38.9k1515 gold badges8383 silver badges107107 bronze badges asked Jul 19, 2009 at 20:52 thatryanthatryan 1,56977 gold badges2222 silver badges4040 bronze badges 1

• don't know if this should be an answer: document.ready fires before images have loaded, not sure if that has an impact. Also, make double sure that jquery's being included right. – Gordon Gustafson Commented Jul 20, 2009 at 1:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

If you want them animated simultaneously, you should set queue to false.

document.ready does not wait for images to download. So use window.onload instead. And you should not be queueing if you want them to animate simultaneously. Also, I think in your animation you need to reset the top/bottom values respectively, so they don't interfere with each other...

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

I think there should be a semicolon instead of a ma at the end of this line:

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

That would explain why the next line is not being called.

For anyone looking for a solution. The queue: true statement kind of worked, but not really so I created another one.

If you're running the same animation, the best way to execute the mand is to put them within one statement.

Use a ma to separate classes/ids. ie) .content, .content2.

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

done :)

Here is what I came up with, with help from various sources. This give the "teeter totter" effect on page load which I was going for.

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

I'm afraid this may be too "brute force", but I don't know of a better, smoother way to do this.