Блог

Я использую эту функцию для добавления или удаления продуктов из избранного. Когда я добавляю или удаляю продукт из избранного, появляется div с сообщением. У меня проблема с анимацией очереди.

Кто-нибудь знает способ исправить это?

 function addFavorite(code, action) {
    var website = 'http://localhost';
    var cod = code;
    var action = action;
    var $this = $j(this);


    if (action == 'removeFav') {

        $j.ajax({
            type: 'post',
            url: '/ajax/handler.favorite.php?action=removeFav',
            data: {
                'cod': cod
            },
            beforeSend: function() {
                $j('.topMessage').show();
                $j('.topMessage span').html('<img src="'   website   '/assets/loader.gif" alt="loading..">');
                $j('.topMessage span').animate({
                    top: " =80px",
                }, 500);
            },
            success: function(data) {
                $j('.topMessage span').html(data);
                $j('.topMessage span').delay(3000).animate({
                    top: "-=80px",
                }, 500);
            }

        });

    }

    if (action == 'addFav') {

        $j.ajax({
            type: 'post',
            url: '/ajax/handler.favorite.php?action=addFav',
            data: {
                'cod': cod
            },
            beforeSend: function() {
                $j('.topMessage').show();
                $j('.topMessage span').html('<img src="'   website   '/assets/loader.gif" alt="loading..">');
                $j('.topMessage span').animate({
                    top: " =80px",
                }, 500);

            },
            success: function(data) {
                $j('.topMessage span').html(data);
                $j('.topMessage span').delay(3000).animate({
                    top: "-=80px",
                }, 500);
            }
        });

    }

}
 

Вы можете сделать что-то вроде этого: создайте функцию для отображения ваших сообщений и анимации вашего div.

 function displayAddedMessage(message) {
    var span = $j('.topMessage span');
    var addedMessage = span.parent();
    var wrapper = addedMessage.parent();
    addedMessage.css('top', -85).hide();
    if (message) {
        span.html(message);
    }
    var clonedAddedMessage = addedMessage.clone(false);
    addedMessage.remove();
    wrapper.prepend(clonedAddedMessage);
    clonedAddedMessage.show().delay(100).animate({
        top: 10
    }, 500).delay(3500).animate({
        top: -100
    }, 500);
}
 

Вы можете использовать эту функцию в:

 function addFavorite(code, action) {
    var website = 'http://localhost';
    var cod = code;
    var action = action;
    var $this = $j(this);



    if (action == 'removeFav') {

        $j.ajax({
            type: 'post',
            url: '/ajax/handler.favorite.php?action=removeFav',
            data: {
                'cod': cod
            },
            beforeSend: function() {
                $j('.topMessage').show();
                displayAddedMessage('<img src="'   website   '/assets/loader.gif" alt="loading..">');
            },
            success: function(data) {
                $j('.topMessage span').html(data);
                displayAddedMessage(data);
            }

        });
    }

    if (action == 'addFav') {

        $j.ajax({
            type: 'post',
            url: '/ajax/handler.favorite.php?action=addFav',
            data: {
                'cod': cod
            },
            beforeSend: function() {
                $j('.topMessage').show();
                displayAddedMessage('<img src="'   website   '/assets/loader.gif" alt="loading..">');
            },
            success: function(data) {
                $j('.topMessage span').html(data);
                displayAddedMessage(data);
            }
        });

    }

}
 

Вы можете добиться такого :

 $j('.topMessage span').stop().animate({
    top: "-=80px",
}, 500);
 

Обратитесь к документации.

надеюсь, это решит вашу проблему

сначала создайте глобальную переменную

  var isAnimating = false; // a global variable
 

затем измените свой код запроса ajax на этот

     $j.ajax({
        type: 'post',
        url: '/ajax/handler.favorite.php?action=removeFav',
        data: {
            'cod': cod
        },
        beforeSend: function() {
            $j('.topMessage').show();
            $j('.topMessage span').html('<img src="'   website   '/assets/loader.gif" alt="loading..">');
            iF(!isAnimating) { // check animation is not running
                isAnimating = true; 
                $j('.topMessage span').animate({
                    top: " =80px",
                }, 500);
            }

        },
        success: function(data) {
            $j('.topMessage span').html(data);
            $j('.topMessage span').delay(3000).animate({
                top: "-=80px",
            }, 500, function() {
                isAnimating = false; // this callback will called after animation complete
            });
        }

    });