jquery - jQuery - 防止动画在没有验证的情况下重复（simplecart js）

Question

我是 jQuery 的新手，如果答案是基本的，我深表歉意。

我正在尝试为我自己的网站开发一个 simplecart js 架子。在将商品添加到购物车之前，必须选择（产品的）尺寸。添加到购物车后，商品会飞入。之后即使没有选择商品尺寸，商品也会执行飞行动画。

我想让它只在选择尺寸选项时才会出现动画（并且最好只在单击“添加到购物车”链接时出现）。

这是我到目前为止所拥有的

使用 jQuery：

// Items flys to cart
    $(".tooltip .item_add").click(function(){
        $(".simpleCart_shelfItem").click(function(){
            var clone = $(this).clone(),
            position = $(this).position(),
            bezier_params = {
            start: {
              x: position.left,
              y: 0, 
              angle: -90
            },  
            end: { 
              x:470,
              y:-100, 
              angle: 180,
              length: .2
            }
          };

        clone.appendTo('.shelf');
        clone.find('.tooltip').hide();
        clone.addClass('addDemoAnimation');
        clone.animate({path : new $.path.bezier(bezier_params)}, 600);
        });
    });

Answer 1

看看这个小提琴。你想要沿着这条线的东西吗

$(".tooltip .item_add").click(function() {
        var tooltip = $('.item_add').closest('.tooltip');
        if($('select',tooltip ).val()!='Select Size'){
            var clone = $('.simpleCart_shelfItem').clone(),
                position = $(this).position(),
                bezier_params = {
                    start: {
                        x: position.left,
                        y: 0,
                        angle: -90
                    },
                    end: {
                        x: 470,
                        y: -100,
                        angle: 180,
                        length: .2
                    }
                };

            clone.appendTo('.shelf');
            clone.find('.tooltip').hide();
            clone.addClass('addDemoAnimation');
            clone.animate({
                path: new $.path.bezier(bezier_params)
            }, 600);
        }
    });