javascript - 如何停止队列动画 jquery？

Question

我正在使用此功能在收藏夹中添加或删除产品。当我从收藏夹中添加或删除产品时，会弹出一个 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);
            }
        });

    }

}

Answer 1

你可以这样做:创建一个函数来显示消息并为 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);
            }
        });

    }

}