animate.css : 悬停脚本动画

Posted 2023-05-08

【中文标题】animate.css : 悬停脚本动画

【英文标题】：animate.css : Animate on hover script

【发布时间】：2013-08-11 16:06:25

【问题描述】：

我正在尝试使用 JS 完成悬停动画，但我对所述语言的技能非常有限。我的 script.js 文件中有这个脚本，因为它是我使用的唯一脚本：

$(document).ready(function() 

    animationHover('#intro-logo' 'tada')

function animationHover(element, animation)
    element = $(element);
    element.hover(
        function() 
            element.addClass('animated ' + animation);          
        ,
        function()
            //wait for animation to finish before removing classes
            window.setTimeout( function()
                element.removeClass('animated ' + animation);
            , 2000);           
        );




)();

目标是，当我将鼠标悬停在#intro-logo 上时，脚本将添加 .animated 和 .tada 类，它们将为该死的东西设置动画！但是我得到了 Uncaught SyntaxError: Unexpected string 这把我带到了

animationHover('#intro-logo' 'tada')

我不知道我做错了什么，我使用了一个教程here，它对那个人有用，但我没有这样的运气。我真诚地感谢任何人的帮助。

提前谢谢你，这个社区太棒了。这是我的第一个问题，但是你们所有人帮助我解决了数百个问题，一路走来，我的 Web 开发能力很艰难（其中大部分显然仍然遥遥领先）。

编辑：我添加了缺少的逗号，现在看来我结束文档的方式存在问题。发布的是我的整个 JS 文件，如何正确关闭所有内容？ )();好像没用。

【问题讨论】：

你需要一个逗号：animationHover('#intro-logo', 'tada')

你需要用);关闭ready

最后你有一个额外的。并且您不需要调用ready 函数的返回值。

就这么简单，你必须关闭和打开一样多的括号。

【参考方案1】：

Working example:

$(document).ready(function () 

    animationHover('#intro-logo', 'tada')

    function animationHover(element, animation) 
        element = $(element);
        element.hover(

        function () 
            element.addClass('animated ' + animation);
        ,

        function () 
            //wait for animation to finish before removing classes
            window.setTimeout(function () 
                element.removeClass('animated ' + animation);
            , 2000);
        );
    

);

删除了末尾不必要的 和()，并添加了逗号。

【参考方案2】：

如果你不一定需要 JS，你可以使用 jQuery：

$(document).ready(function() 
        $("#intro-logo").hover(function () 
             $(this).toggleClass('animated tada');
     );
   );

Working jsfiddle

或者你也可以在纯 CSS 中使用 :hover 伪类来实现