Question

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

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

这是the fiddle I'm working on。

请注意，div会使用动画铰链效果从屏幕上掉下来，但之后它会回到原来的位置。我需要永久地从屏幕上掉下来，或者直到重新加载页面。
您在其中看到的jquery代码段只是我一直在使用的备用后备版，因为我无法让jquery使用CSS动画。（该片段在我的网站上有效，但由于某种原因，它在小提琴中不起作用。）

那么如何使用CSS点击（或悬停）事件来关闭jquery动画？

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

我尝试过的事情：

jquery addClass，根据Dan's suggestion：

上述网址上给出的示例：

$('#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(){});

使用jquery使animate.css效果工作onhover和onclick

1 个答案: