4

divをアニメーション化するこのjQueryコードがあります。Firefox と Chrome では問題なく動作しますが、サファリでは動かず、回転するだけで、Internet Explorer では回転せずに動きます。これを解決するためのアイデアは大歓迎です。

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

2 に答える 2

1

（質問への編集でOPによって回答されました。コミュニティwikiの回答としてここに転写されました-少し簡潔ですが、質問を参照してください。回答はありませんが、コメントで問題が解決されました（またはチャットで拡張されました））

OP は次のように書いています。

200回以上のビューと回答なしの後、私は解決策を見つけました。同じ問題に直面した人のためにここに置きます. 要素の位置を「相対」に変更する必要があります。

于 2015-01-27T14:37:30.357 に答える