Question

我有这个动画div的jQuery代码。它在Firefox和Chrome上完美运行，但在safari中它不会移动，它只是旋转，而在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;
}

Answer 1

（OP在问题的编辑中回答。在这里转录为社区维基的答案 - 即使它有点简洁。见Question with no answers, but issue solved in the comments (or extended in chat)）

OP写道：

经过200多次观看，没有答案，我找到了解决方案，我会把它放在那里面对同样问题的人。您需要将元素的位置更改为“相对”。

Answer 2

就我而言，我删除了overflow-x：hidden ..

 html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

到

 html, body {
   height: 100%;
   width: 100%;
 }

jQuery动画没有在safari上工作

2 个答案: