CSS3 -- 动画animation可以多次点击

$(function(){
    $("ul li").click(function(){
        $("#btn").removeClass().addClass("shake");
        var set = setTimeout(function(){
            $("#btn").removeClass();    
        },1500)
    })
})

点击某元素,让另一个元素执行css3动画效果。

但第二次再点击,就不能执行动画了。

 

解决办法:

setTimeout(function(){
            $("#btn").removeClass();    
},1500);

在动画执行完之后,让这个元素的样式自动清空。(虽然点击时已经有了一个清空样式,但那无效);

注意:这个1500毫秒,应该大于你设定的动画时间:-webkit-animation-duration:1s;

 

[下载 DEMO]

posted @ 2012-05-11 09:34  o0Luffy0o  阅读(5907)  评论(1编辑  收藏  举报