jQuery animate not working on safari

问题:

I have this jQuery code which animates a div. It works perfectly on Firefox and Chrome, but in safari it doesn't move, it is just rotating, and in internet explorer it moves without rotating! any idea on solving this is appreciated.

jQuery:

$(document).ready(function()
{   
  $(".plane").animate({
    'top':'-=0px',
    'left':'+=0px',
    rotate:-50
    }, 500, 'swing');

  $(".plane").animate({
    'top':'-=35px',
    'left':'+=590px',
    rotate:-60
    }, 7000, 'easeOutQuart');

  $(".plane").animate({
    'top':'-=0px',
    'left':'+=0px',
    rotate:25
    }, 2000, 'swing');

  $(".plane").animate({
    'top':'+=30px',
    'left':'+=10px',
    rotate:20
    }, 2000, 'easeInOutCubic');

  $(".plane").animate({
    'top':'-=0px',
    'left':'+=0px',
    rotate:10
    }, 1000, 'swing');

  $(".plane").animate({
    'top':'+=270px',
    'left':'+=180px',
    rotate:0
    }, 5000, 'easeInOutCubic');

  $(".plane").animate({
    'top':'-=0px',
    'left':'+=0px',
    rotate:-130
    }, 1000, 'swing');

  $(".plane").animate({
    'top':'-=490px',
    'left':'+=60px',
    rotate:-120
    }, 5000, 'easeInOutCubic');

  $(".plane").animate({
    'top':'-=0px',
    'left':'+=0px',
    rotate:-250
    }, 1000, 'swing');

  $(".plane").animate({
    'top':'+=150px',
    'left':'-=200px',
    rotate:-270
    }, 5000, 'easeInOutCubic');





 });

CSS:

.plane {
background-image:url('ab.png');
position:absolute;
width:48px;
height:48px;
top:400px;
left:0;
}

回答1:

(Answered by the OP in an edit to the question. Transcribed here as a community wiki answer - even though its a bit terse. See Question with no answers, but issue solved in the comments (or extended in chat) )

The OP wrote:

Well after more than 200 views and no answer , I found the solution, I'll put it here for those who faced the same problem. You need to change position of your element to "relative".