Question

149

Javascript rotation animation

rated 0 times [ 156] [ 7] / answers: 1 / hits: 29319 / 11 Years ago, mon, june 3, 2013, 12:00:00

I am stuck at a point.There are 10 straight lines(png image).What I want is after the first line rotates by 40 deg,then the second line should start its rotaion and then the third,fourth,fifth and so on!!!

code:

<div class=hair onclick=rotate()>

    <img src=single.png id=1 width=10 height=40>

    <img src=single.png id=2 width=10 height=40>

    <img src=single.png id=3 width=10 height=40>

    <img src=single.png id=4 width=10 height=40>

    <img src=single.png id=5 width=10 height=40>

    <img src=single.png id=6 width=10 height=40>

    <img src=single.png id=7 width=10 height=40>

    <img src=single.png id=8 width=10 height=40>

    <img src=single.png id=9 width=10 height=40>

    <img src=single.png id=10 width=10 height=40>

</div>

Javascript:

function rotate(){

    for(var i=1;i<11;i++)

    {

        setInterval(function(){

            document.getElementById(i).style.WebkitTransitionDuration=1s;

            document.getElementById(i).style.webkitTransform = 'rotate(40deg)';

        },100)

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 11 Years ago maleahp · Accepted Answer

There are a couple of steps to solve your problem:

An ID in HTML cannot start with a number, so rename them to something like 'hair1', 'hair2', etc.

The main problem is that because of the setInterval, by the time the function runs, i will not be the i that you were expecting. This is because of variable scope. You can get around this with an anonymous function.

Combining both of the above gives this code:

<div class=hair onclick=rotate()>

  <img src=single.png id=hair1 width=10 height=40>

  <img src=single.png id=hair2 width=10 height=40>

  <!-- etc -->

</div>



// NOTE: This is not the final code listing, see below for a final answer. 

for (var i = i; i < 11; i++) {

  (function(local_i) {

    setInterval(function () {

      // use local_i instead of i inside this function for the results you expect

      document.getElementById('hair' + local_i).style.WebkitTransitionDuration='1s';

      document.getElementById('hair' + local_i).style.webkitTransform = 'rotate(40deg)';

    }, 100);

  })(i);

}

I would also recommend putting the styles into a stylesheet, then apply them using a class:

.rotate

{

  -webkit-transform: rotate(40deg);

  -webkit-transition: -webkit-transform 1s;

}

Finally, to get the elements to rotate in a row rather than all together, you need to multiply the interval by the value of i. I think that you probably mean to use setTimeout rather than setInterval (setInterval will keep running over and over again).

function rotate(){

  for(var i=1;i<11;i++) {

    (function (local_i) {

      setTimeout(function(){

        document.getElementById('hair' + local_i).classList.add('rotate');

      }, 100 * local_i);

    })(i);

  }

}

I've put together a demo here