jQuery队列函数只执行一次

Question

执行

动画.css动画后如何将元素返回到其位置？我使用此代码，但它只执行了一次，然后下次没有删除类

$(".stitch")
    .hover( function () {
        $(this).addClass("animated hinge");
    } )
    .delay( 5000 )
    .queue( function () {
        $(this).removeClass("animated hinge").dequeue();
    } );

我尝试取消排队和下一个，但不起作用。提前感谢您的任何帮助。

Answer 1

如果您希望在动画完成后删除动画类，则可以使用Animate.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);
        });
    }
});
var $me = $( '#me' );
$me.hover( function () {
  $me.animateCss( 'hinge' );
} );

@import url( 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="me">Hello</div>