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 completely gray out an image with css?

    jQuery UI how to avoid submit button getting css classes?

    How to place a responsive background according to content height with HTML / CSS?

    How to flip multiple divs using CSS?

    How to hide the toolbar in Chrome for Android tablets for a 100% high website

    How to implement .SCSS on my own website? [closed]

    How to stick to bottom on layout by using CSS?

    How to build a CSS template from scratch

    How to reference all the rows except the first one using css

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How can I conditionally change css styles with js?

    How to make my a scalable website with auto:height and overflow:auto

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How to make sure my css overlay is on top at any site?

    How to override inline css from external class?

    How to style the wp_list_page in wordpress?

    How to following a link without modifying the displayed url and triggering css animation?

    How to change CSS style without id or class

    How to get ratio of scale image, when it's autoscaled by background-cover?

    how to apply css on only one class?

    show image in aspect ratio and all image size same height and width

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to detect which part of page user is currently on, like on this page?

    How to create rounded shape by CSS

    How quora put that image on their home page? [closed]

    How Do I Reduce the Padding Around a Chart Within an Article

    Howto stretch jsf panelgrid in horizontal direction

    CSS: Background in front of image - how to prevent it?

    How to make my PHP code, display in html table?

    How to get background image/ image to stretch to fill container via CSS?