Animate element by mouseover and animate.css

Question

Is it possible to animate element by mouseover and animate.css?

$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "red");
        $("#mystyle").animateCss('bounce');
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "gray");
    });
});

I tried it but something is wrong. https://jsfiddle.net/f79b7033/

Answer 1

According to the documentation in animation.css, you can extend the jQuery using:

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

And you didn't add it in your code.

Here is a working example (including the above code):
https://jsfiddle.net/dekelb/9jaq7fhr/

Answer 2

I'm not familiar with animate.css but opening the console you get the error:

Uncaught TypeError: $(...).animateCss is not a function
    at HTMLParagraphElement.<anonymous> ((index):53)
    at HTMLParagraphElement.dispatch (jquery-3.1.1.js:5201)
    at HTMLParagraphElement.elemData.handle (jquery-3.1.1.js:5009)

So i looked at the documentation for animate.css and found this:

$('#yourElement').addClass('animated bounceOutLeft');

Added that instead and here is your fiddle - looks like it is working:

https://jsfiddle.net/f79b7033/3/

EDIT: Dekel pointed out that the above error was caused by not extending Jquery (see his answer for how to do that). This is the non-jQuery version.