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);
            }
        });

    }

}

Answer 2

你可以这样做：

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

参考documentation。

Answer 3

希望这能解决您的问题

首先创建一个全局变量

 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
            });
        }

    });

如何停止队列动画jquery？

3 个答案: