简体   繁体   中英

animate.css : Animate on hover script

I'm trying to accomplish a hover animation using JS, but my skills with said language are very limited. I have this script in my script.js file, as it is the only script I'm using:

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

}

})();

The goal is that when I hover over #intro-logo, the script will add classes .animated and .tada which will animate the darn thing! However I get Uncaught SyntaxError: Unexpected string which brings me to

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

I don't know what I'm doing wrong, I used a tutorial here and it worked for the guy, but I'm having no such luck. I would sincerely appreciate anyone's help.

Thank you in advance, this community is amazing. This is my first question, but all of you guys have helped me solve hundreds of problems along my rocky way to web development prowess (much of which obviously still remains ahead).

Edit: I added the missing comma and now it seems there is a problem with the way I'm ending the document. Posted is my entire JS file, how to I properly close everything? })(); doesn't seem to work.

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

});

Removed unnecessary } and () at the end, as well as added the comma.

if you do not necessarily need JS you could use jQuery:

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

Working jsfiddle

alternatively you could also do it in pure CSS with the :hover pseudo class

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM