CODEWITHSUNDEEP
jquerycss
Tomas.R
Tomas.R

Reputation: 963

How can i repeat css3 animation on click?

I create an element and on click I toggleClass .anim so when it is added the animation works but when it's removed the animation obviously doesn't work. How do I make it work everytime I click on this element ? 

$( "<div/>", {
   "class": "test",
   text: "Click me!",
   click : function(){
   $(this).toggleClass('anim');
      }    
}).appendTo( "body" );

http://jsfiddle.net/TomasRR/7jskthcm/15/

Upvotes: 4

Views: 1072

Answers (4)

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

You can use only CSS3 for that, use .test:not(:active) selector instead of .anim:

CSS :

.test:not(:active) {
    animation-duration: .8s;  
    -webkit-animation-duration: .8s;

    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out; 
}

JS :

$( "<div/>", {
    "class": "test",
    text: "Click me!"    
})
.appendTo( "body" );

DEMO : http://jsfiddle.net/7jskthcm/20/

Upvotes: 3

Umesh Sehta
Umesh Sehta

Reputation: 10659

i don't know if its correct way but it worked :-

$( "<div/>", {
"class": "test",
text: "Click me!",
click : function(){
    var t=$(this);
    t.toggleClass('anim').promise().done(function(){    
        setTimeout(function(){
          t.removeClass().addClass('test');
        },800)
    });
}    
})
.appendTo( "body" );

Demo

Upvotes: 1

Cheesi
Cheesi

Reputation: 483

One way would be to use jQuery's animate function. There it should be executed every time

Upvotes: 0

askrich
askrich

Reputation: 598

You could do something like:

var $div = $("<div/>").addClass("test").text("Click Me!").click(function() {
    $(this).removeClass("anim");
    $(this).addClass("anim");
})

$("body").append($div);

That should work.

Upvotes: 0

Related Questions