animate.css:悬停脚本上的动画

时间:2013-08-09 16:35:29

标签: javascript hover jquery-animate animate.css

我正在尝试使用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,它适用于那个人,但我没有这么幸运。我真诚地感谢任何人的帮助。

先谢谢你,这个社区真是太棒了。这是我的第一个问题,但是你们所有人都帮我解决了数百个问题,这些问题沿着我的网络开发实力(其中很多显然仍然领先)。

编辑:我添加了缺少的逗号,现在看来我结束文档的方式存在问题。发布是我的整个JS文件,如何正确关闭所有内容? })();似乎不起作用。

2 个答案:

答案 0 :(得分:0)

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);
        });
    }

});

最后删除了不必要的}(),并添加了逗号。

答案 1 :(得分:0)

如果你不一定需要JS,你可以使用jQuery:

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

Working jsfiddle

或者您也可以使用:hover伪类

在纯CSS中执行此操作