如何使用JQuery在每次点击时重复使用css的动画集?

时间:2013-02-25 12:11:56

标签: jquery html css css3 animation

我在css中创建了一个旋转动画,它需要1s并且使用类.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);}
    }

4 个答案:

答案 0 :(得分:7)

$(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()

答案 1 :(得分:3)

我不确定我是否理解你。无论如何:

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

http://jsfiddle.net/EPv3B/

答案 2 :(得分:0)

每次单击a元素时,都会将css类添加到元素中。 检查此代码。

如果.comet是你的css动画类,那么

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

为要实现它的任何元素重复相同的代码。

答案 3 :(得分:0)

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

这适用于我的问题。我在动画时间结束后删除该类。