CODEWITHSUNDEEP
jqueryhtmlcssrotationjquery-animate
Greg Peckory
Greg Peckory

Reputation: 8058

How to rotate a div, while jQuery animates the same div

I have the code...

    $(document).ready(function(){

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

});

...to move and change the size of my div.

I was looking around on the internet and found a function that allows a div to rotate using jQuery. Unfortunately jQuery uses CSS to do this which means it doesn't allow the div to rotate while it is changing size and position.

What I'm hoping for is that the div is rotating, increasing in size, and changing position, all at the same time. I'm not sure if this is possible but if it is could you explain to me how it's done.

The only thing I can think of is that I do all 3 animations using CSS instead of jQuery. How is this possible, or what's the easiest way to do what i'm trying to do. Thanks a lot !!

Here is my CSS code:

    #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;


    }

Upvotes: 0

Views: 2259

Answers (2)

Somnath Kharat
Somnath Kharat

Reputation: 3600

I think you can use transform

transform:rotate(7deg);

You can rotate according to the degree rotate(7deg)

Upvotes: 0

Tim Wasson
Tim Wasson

Reputation: 3656

It's messy, but throwing in some CSS animations did the job.

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

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

Upvotes: 3

Related Questions