Trigger jQuery animate.css function

Question

I'm not that experienced with jQuery and I'm having some difficulty triggering an animation from the animate.css library. I've got it to work using clicks, but not in the area I want.

Here's the function that works with clicking:

$(function() {
    var animation_name = 'animated shake';
    var animation_end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('#link-add').on('click',function() {
        $('#add-paypal').addClass(animation_name).one(animation_end,function() {
            $(this).removeClass(animation_name);
        });
    });
});

And here's where I want to make it work:

$('#add-link').on('change', function() {

    var animation_name = 'animated shake';
    var animation_end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    var link = $('#add-link').val();
    var paypal = $('#add-paypal').val();

    if (! paypal)
    {
        //Animate #add-paypal
    };
    else
    {
        //Animate #link-add
    };
});

Happy New Year by the way :)

Amy Neville
– Amy Neville

2016-01-01 11:46:19 +00:00
Commented Jan 1, 2016 at 11:46 — Amy Neville
– Amy Neville, Commented Jan 1, 2016 at 11:46

Amy Neville · Accepted Answer · 2016-01-01 12:06:50Z

3

animate.css provides css animation classes which are triggered when added to element so to trigger it you simply do

$('#add-paypal').addClass(animation_name);

but if you want to know when animation finished you can listen to event

$('#add-paypal').addClass(animation_name)
  .one(animation_end, function(){ 
    $(this).removeClass(animation_name);
  });

edited Jan 1, 2016 at 12:06

Amy Neville

10.7k13 gold badges62 silver badges98 bronze badges

answered Jan 1, 2016 at 11:48

Bek

3,2051 gold badge19 silver badges28 bronze badges

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

Comments

void · Accepted Answer · 2016-01-01 11:47:50Z

1

You just need to identify the element on which the animation is to be triggered on and parallelly keeping it simplified.

$('#add-link').on('change', function() {

    var animation_name = 'animated shake';
    var animation_end = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    var link = $('#add-link').val();
    var paypal = $('#add-paypal').val();

    if (! paypal)
    {
        var el = paypal;
    };
    else
    {
        var el = link;
    };

    if(el)
        el.addClass(animation_name).one(animation_end,function() {
            $(this).removeClass(animation_name);
        });
});

answered Jan 1, 2016 at 11:47

void

36.8k10 gold badges72 silver badges111 bronze badges

Collectives™ on Stack Overflow

Trigger jQuery animate.css function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related