Анимация элемента mouseover и animate.css

Question

Возможно ли анимировать элемент с помощью мыши и animate.css?

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

Я пробовал, но что-то не так. https://jsfiddle.net/f79b7033/

Answer 1

Согласно documentation in animation.css, вы можете продлить JQuery с помощью:

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

И вы не добавить его в свой код.

Вот рабочий пример (включая приведенный выше код):
https://jsfiddle.net/dekelb/9jaq7fhr/

Answer 2

Я не знаком с animate.css, но открыв консоль вы получите ошибку:

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) 

Так я смотрел на документацию для animate.css и нашел это:

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

добавил, что вместо того, чтобы и здесь ваша скрипка - похоже, что это работает:

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

EDIT: Dekel отметил, что вышеуказанная ошибка была вызвана не продлевая Jquery (см свой ответ о том, как это сделать). Это версия, отличная от jQuery.