How to trigger css3 rotate effect by clicking?


Tags: javascript,jquery,css,css3

Problem :

I have two divs. One is applied the rotate effect and another would trigger by clicking. Here is the HTML:

<div id="d1">

</div>

<div id="d2">

</div>

<a href=#>click me</a> 

CSS:

#d1, #d2{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px 50px 50px 50px;
    }

    #d2{
        background-color: green;
        -webkit-animation: spin 10s infinite linear;
    }

    .spinEffect{
        -webkit-animation: spin 0.5s 1 linear;
    }

    @-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
    }

JS:

$(function(){
    $("a").click(function(){
        $("#d1").addClass(".spinEffect");
    });
});

Here is the DEMO page http://jsfiddle.net/yNT3L/. I know the problem should be in js, could someone tell me how to modify it? thx!

It's working when I remove the "." But when I click the link, it only work once. How can I fix that?



Solution :

You have an error near your addClass, you should put $("#d1").addClass("spinEffect"); and not ".spinEffect", the . is useless there ;)

For your second question, just add infinite in your css

.spinEffect{
  -webkit-animation: spin 0.5s infinite linear;
}

EDIT

If you want the box to turn once every time you click on the button you can achieve it with the following method

$(function(){
  $("a").click(function(){
    var $d1 = $("#d1"); //little optimization because we will use it more than once
    $d1.removeClass("spinEffect");
    setTimeout(function(){$d1.addClass("spinEffect")},0);
  });
});

You may ask why the setTimeout, it's because otherwise, the class is re-added to quickly for the CSS to trigger the effect ;)


    CSS Howto..

    How to make SpriteSpin responsive?

    How to center right-aligned numbers in table column using CSS?

    how to achieve this effect with css html?

    CSS - How to get star aligned properly on this page

    css 3d animation, how?

    Can someone show me how to get my CSS code to work more than once? [closed]

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How to select text that is not marked up with CSS/jquery?

    How do I display image flush with other images after a clear?

    How does ASP.NET generate HTML?

    how to select an anchor tag with a specific id inside a ul using css

    How to change a CSS property dynamically in Angular

    CSS - EM Values Inconsistent, How To Debug / Explanation

    With CSS, how do you unhighlight a link after clicking a different link?

    how to dynamically remove css in Angular?

    How do I select columns including colspans in a table?

    How come the exact same version of Google Chrome shows different layout?

    How to change size of text input but not textarea in jquery mobile

    How to make a parent --> node relationship in css?

    How to apply css class to uploaded image? [closed]

    CSS: how to add a style to everything, unless it is defined

    How to remove all the borders of a selectbox?

    how to affect an element's width by one child element but not others using CSS

    How to set Bootstrap @font-family-base?

    How to use a JQuery Show/Hide script, to show hidden text

    How to remove critical CSS from the main.css file

    How do I remove applied css on a div by JQuery?

    How to overwrite styling in Twitter Bootstrap

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to add drop down menu using CSS?