CSS Animation using Jquery and '.css'

Question

So I have a piece of code. The purpose is to play a selected animation from Animate.css on click.

The code

  $(".container>parent").click(function () {
    $('.element').css({
      'animation': 'fadeInUp .2s',
      '-webkit-animation': 'fadeInUp .2s'
    });
  });

The problem

Animation runs, but only one time. 'Infinite' attribute causes chaos :P

What else could I do, to play that animation every single time someone click it?

Thanks for your time.

My HTML:

            <span class="parent">
                <img src="assets/myimage.png" class="filter-image">
                <span class="element">Text</span>
            </span>

I want to animate the text everytime I click it.

Propably because you didn't remove animation property after animation finishes — Indy
– Indy, Commented Apr 4, 2015 at 10:01
Hey, thanks and i am making a jsfiddle. But how to remove animation property after the animation finishes? — Andrew
– Andrew, Commented Apr 4, 2015 at 10:03
A better idea to me seems to add and remove a class and add it back again. — Bram Vanroy
– Bram Vanroy, Commented Apr 5, 2015 at 9:05
Thanks @BramVanroy for the suggestion, but the above way seems to work just fine. You said it for the sake of performance? — Andrew
– Andrew, Commented Apr 6, 2015 at 10:47

khv2online · Accepted Answer · 2015-04-04 10:16:46Z

1

$(".container>parent").click(function() {
    $('.element').css({
        'animation': 'fadeInUp .2s',
        '-webkit-animation': 'fadeInUp .2s'
    });

    setTimeout(function(){
        $('.element').removeAttr('style');
    },300);
});

answered Apr 4, 2015 at 10:16

khv2online

1001 silver badge7 bronze badges

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

1 Comment

Andrew Over a year ago

You are the man! Totally understood my mistake. Case closed. Thank you and have a nice day. :)

Indy · Accepted Answer · 2015-04-05 08:56:02Z

The animation won't work the second time if you don't remove animation class after the current animation finishes.

But how to remove animation property after the animation finishes?

Here's a snippet:

var support = {};
support.animation = (function() {
    var animationEnd = (function() {
        var element = document.body || document.documentElement,
            animEndEventNames = {
                WebkitAnimation : 'webkitAnimationEnd',
                MozAnimation    : 'animationend',
                OAnimation      : 'oAnimationEnd oanimationend',
                animation       : 'animationend'
            }, name;

        for (name in animEndEventNames) {
            if (element.style[name] !== undefined) return animEndEventNames[name];
        }
    }());

    return animationEnd ? { end: animationEnd } : false;
})();



function animate(elem, cls, callback) {
    var $elem = $(elem);

    var onEndCallbackFn = function(ev) {
        if (support.animation) {
            $elem.removeClass(cls);
            this.removeEventListener(support.animation.end, onEndCallbackFn);
        }

        if (callback && typeof callback === 'function') { callback.call(this, ev); }
    };

    if (support.animation) {
        $elem.addClass(cls);
        $elem[0].addEventListener(support.animation.end, onEndCallbackFn);
    } else {
        onEndCallbackFn();
    }
}

usage is simple, just call animate function, like this:

animate($('.selector'), 'classWithAnimation', callbackFn);

In you case, you said you are using animate.css library:

$(".container>parent").click(function() {
    animate($('.element'), 'animated fadeInUp', function() {
        console.log('animation complete');
    );
});

Live example: jsFiddle

Collectives™ on Stack Overflow

CSS Animation using Jquery and '.css'

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related