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