Question

How do I roll back to original width this disabled input after cursor pass over, I already tried with.blur but is not working.

   $('input[readonly]').mousemove(function(){
       if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({width: 300}, 'slow');
                $(this).parent().addClass('cooling');
              }
    });

Please See the Below Example :-
http://jsfiddle.net/DCjYA/188/

Answer 1

Not sure for what you need this but you can try focus:

$('input').focus(function(){
if ($(this).val().length > 20) {
$(this).attr('data-default', $(this).width());
$(this).animate({width: 300}, 'slow');
$(this).parent().addClass('cooling');
}
}).blur(function(){ /* lookup the original width */
var w = $(this).attr('data-default');
$(this).animate({
width: w
}, 'slow');
$(this).parent().removeClass('cooling');
});

fiddle:http://jsfiddle.net/DCjYA/192/