Question

$(function(){ 
    $(".square").toggle(
        function(){ $(this).animate({"width":"200px"}, 900); 
                  },

        function(){ $(this).animate({"width":"100px"}, 900); 
        } 
    ); 

    $(document).click(function() {
       $('.square').animate({ "width":"100px"}, 900);  
    });
})​

In this example,
1- The user click the square once (the first function of the toggle is executed).
2- The user then click the background another function is called
3- The user click back the square (and I suppose the second function of the toggle is called, that does the same that the num. 2 and that is why nothing happens in the first click.)

So I suppose in the num. 2 I should skip all the toggle function. I don’t know how to do it

How to skip all the toggle if only the first function is executed?

(by the way I tried “stop().animate” and it doesn’t work)

Here is the example working. You can make changes: http://jsfiddle.net/xngx9/

Answer 1

demo

$(function(){
    $(".square").click(function(e){
        e.stopPropagation();
        var tgl = $(this).width() === 100 ?
        $(this).stop(1).animate({"width":"200px"}, 900):
        $(this).stop(1).animate({"width":"100px"}, 900);
    });

    $(document).click(function() {
      $('.square').stop(1).animate({ "width":"100px"}, 900);  
    });
});