jquery - 如何旋转一个 div，而 jQuery 为同一个 div 设置动画

Question

我有代码...

    $(document).ready(function(){

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

});

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

我在互联网上四处寻找，发现了一个允许使用 jQuery 旋转 div 的函数。不幸的是，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;


    }

Answer 1

虽然很乱，但是加入一些 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 */}
}