单击按钮后在jQuery函数中添加“加载”动画

Question

单击按钮后，我需要在jQuery函数中添加“加载”动画

所以，我有下一个功能：

function get_revpopup_cart( product_id, action, quantity ) {
    quantity = typeof(quantity) != 'undefined' ? quantity : 1;
    if ( action == "catalog" ) {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + quantity,
            dataType: 'json',

        beforeSend: function(){
            $('body').addClass('blur2');
            $('#pagefader2').fadeIn(70);
        },
   .............

和这个动画： <div class="page_gif_progress_icon"><div class="circle"></div></div>

botton： <a onclick="get_revpopup_cart('103', 'catalog', '1');" data-toggle="tooltip" title="В корзину"><i class="fa fa-border fa-shopping-basket"><span class="prlistb">add in cart</span></i> <a onclick="get_revpopup_cart('103', 'catalog', '1');" data-toggle="tooltip" title="В корзину"><i class="fa fa-border fa-shopping-basket"><span class="prlistb">add in cart</span></i>

我需要before $('body').addClass('blur2');添加“加载”动画before $('body').addClass('blur2'); 该函数执行后将打开并消失

谢谢

Answer 1

不知道这是否是您需要的：

function get_revpopup_cart( product_id, action, quantity ) {
  //create reference to your loading animation node 
  var preloader = $('<div>')
                  .addClass('page_gif_progress_icon').
                  .append($('<div>').addClass('circle'));
  quantity = typeof(quantity) != 'undefined' ? quantity : 1;
  if ( action == "catalog" ) {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',

        beforeSend: function(){
            //add your preloader
            $('body').append(preloader);
            $('body').addClass('blur2');
            $('#pagefader2').fadeIn(70);
        success: function (data) {
            //do stuff with data and remove node
            preloader.remove();
        }
    },

Answer 2

抱歉，您的解决方案对我不起作用。 我这样解决了这个问题：

function get_revpopup_cart( product_id, action, quantity ) {
    quantity = typeof(quantity) != 'undefined' ? quantity : 1;
    if ( action == "catalog" ) {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + quantity,
            dataType: 'json',

        beforeSend: function(){

            $('body').append('<div class="page_gif_progress_icon"><div class="circle"></div></div>').addClass('blur2');
            $('#pagefader2').fadeIn(70);
        },

并添加此$(".page_gif_progress_icon").remove();