通过鼠标悬停和 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

我不熟悉 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');

添加了它，这是你的 fiddle - 看起来它正在工作：

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

编辑： Dekel 指出上述错误是由于未扩展 Jquery 引起的（有关如何执行此操作，请参阅他的回答）。这是非jQuery版本。

Answer 2

根据 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/

通过鼠标悬停和 animate.css 为元素设置动画

Animate element by mouseover and animate.css

css

jquery

animate.css