How on jQuery to make that when you click on the <input> block smoothly expanded? I don’t know jQ at all; I could do this:

  $(function(){ $('.sinp').hover(function() { $(this).css('width', '250px'); }); });

Here input'u assigned class .sinp. In theory, it remains to be done smoothly and so that when you "drop" (outfocus or whatever) return back to the value in the css file.

    3 answers 3

    Javascript

     $(function() { $("input").focus(function(){ $(this).animate({ width:"500px"}, 1000); }).blur(function(){ $(this).animate({ width:"250px"}, 500); }); });

    Returned back: http://jsfiddle.net/bq2LC/1 .

      The answer is not much does not fit, since it is not cross-browser, but it can also have a right to exist:

      CSS3 http://jsfiddle.net/bq2LC/3/

       input { width: 250px; -webkit-transition: width 1s leaner; -o-transition: width 1s leaner; -ms-transition: width 1s leaner; -moz-transition: width 1s leaner; } input:focus { width: 500px; } 
         $('.sinp').focus(function() { $(this).animate({width: "250px"}, 1000); });