Question

I’m new to jQuery so apologies if the answer is basic.

I’m trying to develop a simplecart js shelf for my own site. Before an item can be added to the cart, a size (of a product) must be selected. When added to the cart, the item then flies in. After which even if a product size is not selected, the product still carries out the flying animation.

I’d like to make it so the animation only occurs when a size option is selected (and, preferably, only when the ‘Add to cart’ link is clicked).

Here’s what I have so far

With the 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

Check out this fiddle. Are you wanting something along this line

$(".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);
        }
    });