Question

I have this function that is set a width to my inputs and ads a class to parent.

function inputWidth() {
        $('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true);
        $('input[type!="submit"]').focus(function(){
            if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({
                    width: 350
                }, 'slow');
                $(this).parent().addClass('cooling');
            }
        }).blur(function(){ /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({
                width: w
            }, 'fast');
            $(this).parent().removeClass('cooling');
        });
   };

My problem is how do I stop click event when animate is running because if I do click many times simultaneously in 2 inputs on blur the inputs doesn’t know to run back to original size.

I attached you a printscreen to understand better the behavior. here is: http://s17.postimage.org/j6kn0fr9b/fiddle.jpg
and here is a fiddle example:
http://jsfiddle.net/DCjYA/223/
thank’s.

Answer 1

You just have to add a .stop() to your animations and the fields will go back to their original size no matter how many times you click here and there – http://jsfiddle.net/DCjYA/224/