如何旋转一个div，而jQuery的动画同一div

我的代码...如何旋转一个div，而jQuery的动画同一div

$(document).ready(function(){ 

    $("#box").animate({ 
     top: "250px", 
     left: "500px", 
     width: '300px', 
     height: '250px', 
    }, 2000); 

});

...移动和改变我的div的大小。

我在互联网上四处张望，发现一个允许div使用jQuery旋转的函数。不幸的是，jQuery使用CSS来做到这一点，这意味着它不允许div在大小和位置发生变化时旋转。

我希望的是div在旋转，尺寸在不断增大，位置也在不断变化。我不确定这是否可行，但如果是这样，你能向我解释它是如何完成的。

我能想到的唯一的事情是我使用CSS而不是jQuery来做所有3个动画。这怎么可能，或者做什么我想要做的最简单的方法是什么。非常感谢！！

这里是我的CSS代码：

#box{ 

     -moz-border-radius:15px; 
     border-radius:15px; 
     width:1px; 
     height:1px; 
     background:#D8D8D8; 
     border:2px solid black; 
     position: relative; 
     margin-left:100px; 
     margin-top:150px; 


    }

来源

2013-08-16 Greg Peckory

“jQuery使用CSS做度旋转这意味着它不允许div在转换时旋转大小和位置“ - 我不认为相关性是诚实的，为什么不能同时为多个属性制作动画？你是如何旋转元素的？ – xec

CSS在jQuery动画改变位置和大小之前动画旋转。所以它旋转，然后它改变大小。而不是同时旋转和更改大小。 –

你可以在http://jsfiddle.net上进行演示吗？ – xec

它的混乱，但在一些CSS动画抛做的工作。

http://jsfiddle.net/Pd426/1/

新的CSS：

#box{ 

     -moz-border-radius:15px; 
     border-radius:15px; 
     width:1px; 
     height:1px; 
     background:#D8D8D8; 
     border:2px solid black; 
     position: relative; 
     margin-left:100px; 
     margin-top:150px; 


    transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */ 


    animation: rotate 2s; 
-webkit-animation: rotate 2s; /* Safari and Chrome */ 

    } 

@keyframes rotate 
{ 
from { transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */} 
to { transform:rotate(360deg); 
-ms-transform:rotate(360deg); /* IE 9 */ 
-webkit-transform:rotate(360deg); /* Safari and Chrome */} 
} 

@-webkit-keyframes rotate /* Safari and Chrome */ 
{ 
from { transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */} 
to { transform:rotate(360deg); 
-ms-transform:rotate(360deg); /* IE 9 */ 
-webkit-transform:rotate(360deg); /* Safari and Chrome */} 
}

来源

2013-08-16 14:01:45

它的功能非常完美，您能否简单介绍一下您在那里做了些什么。非常感谢。 –

当然...我没有碰你的jQuery，这只是CSS动画，补充了你的jQuery。在div上设置初始旋转“transform：rotate（0deg）”，然后使用下面的关键帧进行动画处理。查看CSS动画以获取更具体的信息。 –

Thansk一百万 –

我认为你可以使用transform

transform:rotate(7deg);

您可以根据rotate(7deg)

来源

2013-08-16 14:02:02

如何旋转一个div，而jQuery的动画同一div

回答

相关问题