title: JQuery: .focus() event on whole form? How to?
body: <p>consider the following HTML: </p>
  
  <pre><code>&lt;form ....&gt;
     &lt;textarea&gt;....&lt;/textarea
     &lt;input .... /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now I want to show a help section when the user is focused on ANY of the form elements. When the focus is gone the help information should too. </p>
  
  <p>My idea was this: </p>
  
  <pre><code>$("form").focus(function(){...});
  $("form").unfocus(function(){...});
  </code></pre>
  
  <p>But it doesn't seem to work. Any ideas? Thanks a lot for your help!</p>
  
  <p>Tom</p>
  
  <p>Addition: 
  Thank you all a lot, it works. I used lonesomeday's solution, but there is another problem with my animations:  </p>
  
  <pre><code>$('form').delegate(':input', 'focus', function() {
  
      $("#eintrag").animate({"height": "160px"}, 500)
      $("#header").animate({"height": "200px"}, 500)
      $("#container").animate({"margin-top": "240px"}, 500)
      $(".show").animate({"opacity": "0"}, 500)
      $(".hide").animate({"opacity": "1"}, 500)
      $("#header_links&gt;p").animate({"opacity": "0"}, 500)
  
  }).delegate(':input', 'blur', function() {
  
      $("#eintrag").animate({"height": "20px"}, 500)
      $(".show").animate({"opacity": "1"}, 500)
      $("#container").animate({"margin-top": "150px"}, 500)
      $(".hide").animate({"opacity": "0"}, 500)
      $("#header_links&gt;p").animate({"opacity": "1"}, 500)
      $("#header").animate({"height": "110px"}, 500)
  
  });
  </code></pre>
  
  <p>This means that I get the animation each time I change focus within the form. How do I change this?</p>