触发jQueryanimate.css函数

Question

我对 jQuery 没有那么多经验，而且我在从 animate.css 库触发动画时遇到了一些困难。我已经通过点击让它工作，但不是在我想要的区域。

这是与点击一起使用的函数：

$(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);
        });
    });
});

这里是我想让它发挥作用的地方：

$('#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
    };
});

Answer 1

您只需确定要在其上触发动画的元素并同时简化它。

$('#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);
        });
});

Answer 2

animate.css 提供 css 动画类添加到元素时触发，因此您只需执行

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

但是如果你想知道动画什么时候结束你可以听事件

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

触发jQueryanimate.css函数

Trigger jQuery animate.css function

jquery

animate.css