jquery - 使用 jquery 使 animate.css 效果在悬停和点击时起作用

Question

我正在使用 Dan Eden 的 CSS3 动画。

我在使用 jquery 处理悬停或点击事件时遇到了麻烦。

这是 the fiddle I'm working on .

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

2. 您在其中看到的 jquery 片段只是我一直在使用的备用备用方法，因为我无法让 jquery 与 一起工作CSS 动画呢。 (该片段在我的网站上有效，但由于某种原因它在 fiddle 中不起作用。)

那么如何使用 jquery 单击(或悬停)事件触发 CSS 动画？

点击后，div 不应重新出现。

我尝试过的事情:

jquery addClass，根据 Dan's suggestion :

上面页面 URL 中给出的示例:

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

我也尝试过将 CSS3 .animated 和 .hinge 更改为使用 :active，但没有成功，如果我记得的话正确的是，它仍在将 div 放回去而不是让它永久消失。

如果有人能指出我的方向。我花了几天时间试图让整个事情顺利进行。我大部分时间都在阅读我能找到的关于这个主题的所有内容；我想了解如何执行此操作，而不仅仅是为我修复它。

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

解决方案，已解决:

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

Answer 1

我已经更新了你的fiddle随心所欲地工作

要使用 jquery 监控 CSS3 动画，请参阅 this link .

注意:

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

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

所以更喜欢使用

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