Question

i would like to have a set of 11 elements “fly” into a page – by a chained set of animations using jQuery animate().

i have the following: http://bit.ly/g90S3J
which seems to work quite well in FF3.6
but i see that in IE8 -the animations and positions are way off – with elements remaining off the stage, or flying of the stage, whereas in FF, they collect around the center, as they should.

what sometimes also seems to happen in FF, is that the final position of the elements seems to change on a sporadic basis once in a while. weird!!

can someone give me a hand here?

Many Thanks!

Answer 1

You have this:

.flyItem {
    display: inline;
    overflow: visible;
    position: absolute;
}

When I mean to set an initial position just add:

  top:0;
   left:0;

To the properties and since you have:

$(function(){ 
       $("#item1").animate({'top': '+=1200px'},2000, 'swing', function(){
      $("#item2").animate({'right': '-=2630px'},3000, 'swing', function(){
        $("#item3").animate({'top': '-=2700px'},3000, 'swing');        
                                                                                         });                                                           
                                                                        }); 

       $("#item6").animate({'right': '+=1860px'},2000, 'swing', function(){
       $("#item5").animate({'top': '+=1000px'},3000, 'swing', function(){
        $("#item4").animate({'right': '+=1000px'},3000, 'swing');          
                                                                                });                                                        
                                                                        }); 


});

the ‘flyItem’ elements must all be inside a relatively positioned div.