4

我有这个为 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;
}
4

2 回答 2

1

(由 OP 在对问题的编辑中回答。在此处转录为社区 wiki 答案 - 尽管它有点简洁。请参阅没有答案的问题,但问题在评论中解决(或在聊天中扩展)

OP写道:

好吧,经过200多次浏览而没有答案,我找到了解决方案,我会把它放在这里给那些面临同样问题的人。您需要将元素的位置更改为“相对”。

于 2015-01-27T14:37:30.357 回答
0

就我而言,我删除了overflow-x:hidden..

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

 html, body {
   height: 100%;
   width: 100%;
 }
于 2020-01-10T10:22:57.367 回答