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

animate.css提供了css动画类，这些类在添加到元素时触发，因此只需执行即可触发

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

但是如果你想知道动画何时结束，你可以听事件

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

Answer 2

您只需要识别要触发动画的元素，并平行地保持简化。

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

触发jQuery animate.css函数

2 个答案: