【问题标题】:animate.css : Animate on hover scriptanimate.css : 悬停脚本动画
【发布时间】: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 函数的返回值。
  • 就这么简单,你必须关闭和打开一样多的括号。

标签: javascript hover jquery-animate animate.css


【解决方案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 伪类来实现

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-04-02
      • 2020-10-14
      • 1970-01-01
      • 2014-05-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多