up vote 1 down vote favorite

I have a CSS class which forms a circle and I am trying to rotate it dynamically from Jquery by adding a css property .It works fine when I click the button for the first time and rest of the time it's idle. I tried using "cssAmination" function and its of no use. I am not able to figure out where I am going wrong. Please help me out in fixing this code. Thanks in advance.

/*Circle code*/
div.circle{   
width: 300px;   
height: 300px;    
-moz-border-radius:150px; 
-webkit-border-radius: 150px;  
background:#808080; 
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}

/*rotate class*/
div.rotateCircle
{   
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}

@-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}

//Jquery code:
<script type="text/javascript">
        $(document).ready(function(){
    $("a").click(function(){
        $('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
    });
}); </script>
<body>
    <h3>Labs Project</h3>
    <div>
        <div id=rotateCircle class="circle">
            &nbsp;
        </div>
        <div id=rotateCircle class="horizontalLine">
            &nbsp;
        </div>
        <div id=rotateCircle class="verticalLine">
            &nbsp;
        </div>
        <div class="divButton">
            <table>
                <tr>
                    <td><a class="btn" href="#">HOME</a></td>
                    <td><a class="btn" href="#">Class</a></td>
                    <td><a class="btn" href="#">CV</a></td>
                    <td><a class="btn" href="#">CM</a></td>
                </tr>
            </table>
        </div>      
    </div>
</body>
share|improve this question
Can you post your html? – Alex W Jun 19 '12 at 1:22
Alex, I have edited the body cotent of html to the main post. Thanks. – Sathish Chandran Jun 19 '12 at 1:25
You need to put quotes around the div ids <div id="rotateCircle"> – Alex W Jun 19 '12 at 1:31
I cannot even reproduce the effect you are using once. I think you should get it working in a jsfiddle.net example so that you can show us and we can make changes. – Alex W Jun 19 '12 at 1:34
1  
Here's an article on restarting CSS animations but you can only specify an ID once, you've specified rotateCircle three times. – cchana Jun 19 '12 at 8:11
show 4 more comments

2 Answers

up vote 0 down vote

You should take a look to the JavaScript events for the animations : https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events

Basically, I've added a class for the animation's name 

#rotateCircle.rotate {
    -webkit-animation-name: moveCircle;
       -moz-animation-name: moveCircle;
         -o-animation-name: moveCircle;
            animation-name: moveCircle;
}

And instead of adding the CSS in jQuery, you just add the class and remove it when the animation is finished, with the animationend event :

$(function() {
    var $rotateCircle = $('div#rotateCircle');
    $("a").click(function(){
        $rotateCircle.addClass('rotate')
        .on('animationend', function() {
            $rotateCircle.removeClass('rotate');
        });
    });
});

(I've made it look a bit nicer too) Here is the new working fiddle.

NB: The animationend event is prefixed on some browser, here is a gist I've made to support all the different browser (you'll need Modernizr).

share|improve this answer
up vote 0 down vote

There is a css3 transition property that will make this task really simple. I used webkit for my post, change properties accordingly.
CSS

#rotateCircle.rotate {
    -webkit-transform: rotate(0);
    -webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}

Then with js, all you need is to set the css property to transition on, and it will magically animate to those settings, in this case transform.

$(function() {
    var angle = 0;
    $("a").click(function(){
        angle += 90;
        $("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
    });
});

I didn't test this code, but the transition property is simple to use, and since I've learned it, I rarely use keyframes/css animation properties anymore.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.