Question

所以我为购物车制作了动画，这样当有人点击“购买”时，购物车就会打开，产品会出现克隆，克隆消失，购物车再次关闭。我的问题是，当有人多次点击按钮时，动画每次都会重新开始。我想要的是动画会保持正常运行，当推车打开时，点击的每个产品的克隆出现并一个接一个地消失，然后推车再次关闭，或者至少看起来不那么出问题。

我的jquery：

$("input[name=\"comprar\"]").click(function(event) {
    //get form values
    var comprar = $(this).val();
    var form = $(this).parents("form");
    var cartData = form.serialize() + "&comprar="+ comprar;
    //submit form ajax
    if ($("div.minicart").length > 0){
        $.ajax({
            type: "POST",
            url: siteurl,
            data: cartData,
            success: function(cart){
                var target = $(event.target).parents("div.rproducts");
                $("div.minicart_container").css({"overflow":"hidden"});
                target.clone().insertBefore("div.minicart_container a");
                $("div.minicart_container div.rproducts input[type=submit]").css({"display":"none"});
                $("div.minicart_container div.rproducts").css({"margin":"10px 30px", "padding":"10px", "background-color":"#ffffff", "border-radius":"10px", "display":"none", "opacity":"0"});
                $("div.minicart_container div.rproducts").slideDown(1000);
                $("div.minicart_container div.rproducts").animate({"opacity": "1"}, 500);
                $("div.minicart_container div.rproducts").delay(800).animate({"opacity": "0"}, 500);
                $("div.minicart_container div.rproducts").delay(100).slideUp(1000);
                setTimeout(function() {
                    $("div.minicart_container div.rproducts").remove();
                }, 4000);
                //refresh cart price
                var getcart = $(cart).find("div.minicart").html();
                $("div.minicart").hide().html(getcart).fadeIn("fast");
                //remove clone immediately if button is clicked again
                $("input[name=\"comprar\"]").click(function(event) {
                    $("div.minicart_container div.rproducts").remove();
                });
            }
        });
        return false;
    }
});

Answer 1

你可以做的是在动画开始时设置一个标志（bool），动画完成后关闭它。

在开始动画之前单击后，检查标志是否已启动。

代码是这样的：

Jquery点击动画如果在结束之前再次点击则继续前进

1 个答案: