CODEWITHSUNDEEP
javascriptjqueryhtml
thatryan
thatryan

Reputation: 1559

Animating two divs at same time onload, jquery help

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

Upvotes: 1

Views: 9810

Answers (5)

thatryan
thatryan

Reputation: 1559

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.

Upvotes: 0

Thisismint
Thisismint

Reputation: 188

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 command is to put them within one statement.

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

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

done :)

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82493

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);
});

Upvotes: 1

Chris
Chris

Reputation: 1001

I think there should be a semicolon instead of a comma 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.

Upvotes: 0

seth
seth

Reputation: 37277

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

Upvotes: 1

Related Questions