Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Paccione
Michael Paccione
9,017 Points

Jquery animate rotate

Hi, I am trying to complete an animation demo with divs and jQuery.

I have 19 square divs that are stacked in the center with absolute positioning. I am trying to create an tile pattern that rotates outward.

I've tried so many different combinations of .animate and .rotate that I want to strangle jQuery at this point.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='style.css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src='script.js'></script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

div {
    height: 100px;
    width: 100px;
    background-color: #888;
    position: absolute;
}

.divPos {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);

}

$(document).ready(function(){

    var divCount = document.getElementsByTagName('div').length;

    for(var i = 0; i <= divCount; i++) {
        $('div').eq(i).addClass('divPos');
        $('div').eq(i).animate({webkitTransform: 'rotate(45deg)', left: '+=5%'});

    };

);
mikes02
mikes02
Courses Plus Student 16,968 Points

Just curious, have you looked into whether or not CSS3 rotate would work? http://www.w3schools.com/css/css3_2dtransforms.asp

Michael Paccione
Michael Paccione
9,017 Points

webkitTransform: 'rotate(45deg)' is a 2d CSS transform.

If you mean use classes instead I can't do that because It will end up to be to much complexity comparatively.

mikes02
mikes02
Courses Plus Student 16,968 Points

Can you post your HTML as well and also are you wanting to trigger this animation on click, hover, or just right away? And can you clarify a bit more what you are trying to accomplish with the animation, I am not sure I understand it fully.

Michael Paccione
Michael Paccione
9,017 Points

Kinda of like this in a way... http://i.dailymail.co.uk/i/pix/2014/08/05/1407240716798_wps_33_MANDATORY_BYLINE_PIC_BY_A.jpg

Essentially a center square that has other square spin out from it and orbit around it while rotating themselves. I would have it auto execute and rely heavily on timeouts and intervals.

1 Answer

Jonathan Ankiewicz
Jonathan Ankiewicz
17,901 Points
Jonathan Ankiewicz
Jonathan Ankiewicz
17,901 Points

Do you have it working?

That's a pretty complicated animation. My assumption would be that you need to rotate all of the items on redefined anchor points. Because you need to change the location of image, then rotate it around a single point.

If you check out my navigation on my portfolio site you can see I have a expanding circle from multiple divs and if you inspect it you will see that I had to use top and left points for the locations for every single div and new location for when it expanded. I see a lot of math in your future.

You can put each circle in as a single image scale it down when not used, scale it up on click and rotate the png image but you would loose all reactiveness minus a hover state. for the divs.

Other then that