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 a rollover div clickable?

    How to create a Line Item with vertical middle aligned text?

    How to generate CSS markup for non-designers

    how to vertically center align div elements with contents other than text

    Border positioning: how to?

    How to stop a timeOut animation that contains multiple timeOut animations within

    Ember css dosen't work + How to create two stylsheets

    How to make a dropdown float with CSS

    How to change social network icons colors in fixed menu?

    How to load only html from web pages in selenium

    How to use CSS on an Html.ActionLink in C#

    How to replace css class value using angularjs values?

    How do I remove white space due to position relative of CSS?

    When using WebFont loader, how to hardcode the css?

    HTML/CSS How to format Text and have an Image floating next to it

    How do I take code from Codepen, and use it locally?

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How to preserve sibling element position when one sibling is absolutely positioned?

    how can resize dynamically the logo of the header?

    How to toggle multiple images in jquery?

    How set a page to maximum and minimum sizes via css

    Hide all div element but show first two

    Resize the content of a div based on how many objects are in the div

    How to make CSS border show on radio button click

    How to preload style image to use it when server is down?

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    how to make the title bar fixed

    how to properly align list items vertically?

    How to clear the bottom of an image like clear left / right

    How to add a third level to my CSS drop down menu