Я не слишком разбираюсь в 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
    };
});

Amy Neville

Ответов: 2

Ответы (2)

animate.css предоставляет классы анимации css, которые запускаются при добавлении к элементу, поэтому для его запуска вы просто выполняете

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

но если вы хотите знать, когда анимация закончилась, вы можете прослушать событие

$('#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)
    {
        var el = paypal;
    };
    else
    {
        var el = link;
    };

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

2022 WebDevInsider