mouseoverとanimate.cssで要素をアニメ化

Question

mouseoverと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バージョンです。