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