Question

我有代码......

    $(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;


    }

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 */}
}

Answer 2

我认为您可以使用transform

transform:rotate(7deg);

您可以根据rotate(7deg)

度旋转

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

2 个答案: