JQuery का उपयोग करके प्रत्येक क्लिक पर, मैं सीएसएस के साथ एनीमेशन सेट कैसे दोहरा सकता हूं?

Question

मैंने सीएसएस में एक रोटेशन एनीमेशन बनाया जो 1 एस लेता है और कक्षा के साथ 'आगे' सेट करता है .comet। मैं उस एनीमेशन को बाहरी तत्व पर प्रत्येक क्लिक पर कैसे शुरू कर सकता हूं?

#carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; } 
    @-moz-keyframes rotation{ 
     from{transform:rotate(0deg);} 
     to{transform:rotate(-360deg);} 
@-webkit-keyframes rotation{ 
     from{-webkit-transform:rotate(0deg);} 
     to{-webkit-transform:rotate(-360deg);} 
    } 

Answer 1

$(function() {// Shorthand for $(document).ready() 
    $(".trigger").click(function(e) { 
     e.preventDefault(); 
     $(this).addClass("animation").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
      $(this).removeClass("animation"); 
     }); 
    }); 
}); 

संसाधन:

1. How to Capture CSS3 Animation Events in JavaScript
2. jQuery .one()

Answer 2

तत्व के प्रत्येक क्लिक पर आप तत्व में सीएसएस वर्ग जोड़ते हैं। इस कोड को चेक करें।

अगर .comet अपने सीएसएस एनीमेशन वर्ग तो

$(document).ready(function(){ 
    $('#everybutton_element_id').click(function (e) { 
      $(this).addClass('comet'); 
      $(this).delay(2000).removeClass('comet'); 
    }); 
}); 

दोहराने तत्वों जिस पर आप इसे लागू करना चाहते हैं के किसी भी नहीं के लिए एक ही कोड है।

Answer 3

सुनिश्चित नहीं है कि मैं आपको सही समझता हूं। वैसे भी:

$('#button').click(function() { 
    var el = $('#cometa').addClass('rotation'); 
    setTimeout(function() { 
     el.removeClass('rotation'); 
    }, 1000); 
}); 

http://jsfiddle.net/EPv3B/

Answer 4

$('body').on('click', '#next', function() { 
    $("#cometa").addClass("rotation"); 
    setTimeout(function() { 
    $("#cometa").removeClass('rotation'); 
}, 1500); 
}); 

यह मेरी समस्या के लिए काम करता है। एनीमेशन-समय समाप्त होने के बाद मैं उस वर्ग को हटा देता हूं।