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

2023年12月10日 370次阅读

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

我在使用jquery进行悬停或点击事件时遇到了麻烦.

这是the fiddle I’m working on.

>请注意div使用动画铰链效果从屏幕上掉下来,然后它又回到原来的位置.我需要永久地从屏幕上掉下来,或者直到重新加载页面.
>你在那里看到的jquery片段只是我一直在使用的替代后备,因为我还无法让jquery使用CSS动画. (该片段在我的网站上运行,但由于某种原因,它在小提琴中不起作用.)

那么如何使用jquery点击(或悬停)事件来启动CSS动画？

点击后,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();
            });
        });

最佳答案 我已根据您的喜好更新了您的
fiddle

使用jquery监视CSS3动画请参阅this link.

注意：

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

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

所以更喜欢使用

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