CODEWITHSUNDEEP
javascriptjquerycss
SPG
SPG

Reputation: 6197

How to trigger css3 rotate effect by clicking?

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

$(function() {
  $("a").click(function() {
    $("#d1").addClass(".spinEffect");
  });
});
#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);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
</div>
<div id="d2">
</div>
<a href=#>click me</a>

Here is the demo page. I know the problem should be in js, could someone tell me how to modify it?

It's working when I remove the .

But when I click the link, it only work once. How can I fix that?

Upvotes: 2

Views: 10186

Answers (3)

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

You can actually do this entirely in CSS and eschew the javascript completely (assuming the target browsers support the :target pseudo-class)

:target selects whichever element has the ID specified by the hash portion of the url, for example: http://localhost/#d1 would be the URL after clicking the link in this answer.

Note I realized that this means the animation would only happen once. So if this was for a situation where the link could be clicked multiple times, definitely go with the JS solution (though I think you'll have to remove the class and add it again to re-trigger the animation)

HTML:

<div id="d1">

</div>

<div id="d2">

</div>

<a href="#d1">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;
    }

    /* or #d1:target */
    :target{
        -webkit-animation: spin 0.5s 1 linear;
    }

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

Upvotes: 2

Tronix117
Tronix117

Reputation: 1985

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 ;)

Upvotes: 4

Deep Sharma
Deep Sharma

Reputation: 3473

all you have do is just remove the '.' from class name in js

JS:

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

Upvotes: 2

Related Questions