淡出时，jQuery动画到不透明度不再出现

Question

我正在开发一个Web应用程序。我正在使用jQuery作为前端。坦率地说，我不擅长前端。现在我在按钮点击事件上动画元素时遇到问题。我的不透明动画。但是第二次触发按钮时不会触发问题动画。我正在做的是购物车添加按钮。加载页面时，隐藏数量。当用户点击添加按钮时，数量将显示新计数。然后慢慢消失。但问题是它在第一次淡出后不再出现。请参阅下面的代码。

这是我添加到购物车按钮点击事件

$('.instant-add-to-cart-btn').on('click', function (e) {

        var id = $(this).attr('data-id');
        var url = $('.add-to-cart-url').val();
        var $quan = $('#instant-quantity-span-' + id);
        $quan.css({ "opacity": 1 })
        $.post(url, { itemId: id, belonging: 0, quantity: 1 }, function (data) {
            var count = parseInt($quan.text()) + 1;
            $quan.text(count);
            $quan.animate({
                opacity: 0
            }, 1000)
        });

    });

这是数量范围的css

span[id^=instant-quantity-span]{
    font-size:25px;
    margin-right:5px;
    vertical-align:top;
    display:inline-block;
    opacity:0;
}

最初，它不会显示。每按一次按钮，然后慢慢显示。但正如我所提到的，即使我点击几次也不会再次出现。