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/

修改 Dekel指出上述错误是由于没有扩展Jquery引起的（请参阅他的答案，了解如何做到这一点）。这是非jQuery版本。

通过mouseover和animate.css动画元素

2 个答案: