CODEWITHSUNDEEP
javascriptjquery
Eva Nebko
Eva Nebko

Reputation: 214

Move block during his appearance

Here can be seen that the first block appears and then changes it's margin.

How can I make it so that these two events occurred simultaneously?

I'm tried to run this two functions simultaneously, but it did not work:

$(document).ready(function(){

  $('#box1').fadeIn(2000); 
  $('#box1').animate({marginLeft: '100px'});  

}); // end ready

Upvotes: 1

Views: 60

Answers (1)

Noble Mushtak
Noble Mushtak

Reputation: 1784

As Felix Kling said, to make these animations happen at the same time, you should animate these boxes with opacity using the jQuery method .animate(). That way, you're making this all one animation instead of one animation and then another.

$(document).ready(function(){
    //Hide these boxes not with display:none, but with opacity:0 and then change their opacity to 1.
    $('#box1').animate({marginLeft: '100px', opacity: '1'}, 2000);  
    $('#box2').animate({marginLeft: '100px', opacity: '1'}, 2000);  
}); // end ready

Here's the fiddle: http://jsfiddle.net/4BnG3/1/

Upvotes: 1

Related Questions