使用jQuery使animate.css效果在悬停和onclick上工作

Question

我正在使用CSS3Dan Eden 的动画。

我在处理jquery悬停或单击事件时遇到麻烦。

这是我正在研究的小提琴。

1. 注意div通过动画铰链效果从屏幕上掉下来，但随后又回到了原来的位置。我需要它从屏幕上永久掉下来，或者直到重新加载页面为止。

2. jquery您在其中看到的摘录只是我一直在使用的备选后备广告，因为我还不能jquery使用CSS动画。（该代码段在我的网站上有效，但是由于某种原因，它在小提琴中不起作用。）

那么，如何CSS使用jqueryclick（或悬停）事件触发动画？

单击后，div应该不会再出现。

我尝试过的事情：

jquery addClass根据Dan的建议：

上面页面URL上给出的示例：

$('#yourElement').addClass('animated bounceOutLeft');

我也尝试过更改CSS3 .animatedand .hinge使用:active，但是没有运气，如果我没记错的话，它仍然是将div放回原处，而不是让它永久消失。

如果有人可以指出我的方向。我花了几天时间试图使整个事情正常进行。我大部分时间都在阅读关于该主题的所有文章；我想学习如何做到这一点，而不仅仅是为我解决它。

如果我缺少任何信息，我是这个论坛的新手，所以请放轻松。:)

解决方案：

$('#pricetag_overlay1 a').click(function(){ 
            $('#pricetag_overlay1').toggleClass("animated hinge",function(){
               $(this).remove();
            });
        });       

Answer 1

我已经更新了你的小提琴以按照你的喜好工作

要使用 jquery 监控 CSS3 动画，请参阅此链接。

笔记：

$(window).load(function(){}) 

上面的脚本只会在初始页面加载时触发

所以更喜欢使用

$(document).ready(function(){});