jQuery queue function just execute once

Question

How can i return element to its position after execute animated.css animations? I use this code but it just executed once and then classes didnt remove for next time

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

I tried dequeue and next but not working. Thank you in advance for any help.

Are you looking to remove the class after the animation has finished? — hungerstar
– hungerstar, Commented Apr 6, 2017 at 20:47
yes, class didnt remove for 2nd time, also i put alert and queue didnt execute — Mohsen
– Mohsen, Commented Apr 6, 2017 at 20:52
Animate.css has a solution for this in their documentation which I have posted in my answer. — hungerstar
– hungerstar, Commented Apr 6, 2017 at 20:55

hungerstar · Accepted Answer · 2017-04-06 20:55:00Z

1

If you're looking to remove the animation classes after the animation has completed you can use the simple jQuery plugin code take from the documentation for Animate.css.

$.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>

answered Apr 6, 2017 at 20:55

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery queue function just execute once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related