0

I am making a button, that once you click it, it does a 360* spin, and does a function, I am using jQuery for this. But, the first time you press the button, it does the 360* spin, and after that, not so much. It never does it again until you refresh the page. I'm new to Javascript/jQuery so sorry if it's a super simple fix..

Here is my code.

HTML 

<div id="refresh"><a href="javascript:changetop()">
<img src="images/refresh.png" height="50" width="50"/></a>
</div>

JavaScript

function changetop(){

    $("#refresh").css({ WebkitTransform: 'rotate(' + '360' + 'deg)'});  
     $("#refresh").css({ '-moz-transform': 'rotate(' + '360' + 'deg)'});                  
    timer = setTimeout(function() {
    },1000);      
    }

CSS

#refresh{
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    transition:all 1s ease;
}

Any ideas? Thanks for all help in advance.

4

1 回答 1

0

So once you click, it runs your changetop function, which sets it to be rotated to 360 degrees.

When you click it again, it runs the function again and sets it to be rotated to 360 degrees... but it's already rotated to 360 degrees! So it won't actually move anywhere.

You'll need to reset it back to 0 degrees after it's spun.

Or you could use CSS keyframing to describe a 360 degree rotation animation.

于 2013-09-09T15:56:00.867 回答