title: Jquery - form labels
body: <p>I have a simple login form with 2 fields, user and pass. I am trying to get the labels inside the inputs to hide on focus, then come back on blur if nothing was entered, but the password label keeps reappearing in the username input and I can't figure out why.</p>
  
  <p>form:</p>
  
  <pre><code>&lt;form method="post" id="nav-login-form" class="float-right" action=""&gt;
      &lt;fieldset&gt;
          &lt;div&gt;
              &lt;label id="login-user-label" for="user"&gt;user&lt;/label&gt;
              &lt;input id="login-user" class="float-left" type="text" name="user" /&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;label id="login-pass-label" for="pass"&gt;pass&lt;/label&gt;
              &lt;input id="login-pass" class="float-left" type="password" name="pass" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input class="button float-left" type="submit" name="submit" value="login" /&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$("#login-user")
  .bind("focus.labelFx", function(){
    $("#login-user-label").hide();
  })
  .bind("blur.labelFx", function(){
    $("#login-user-label")[!("#login-user").value ? "show" : "hide"]();
  })
  .trigger("blur.labelFx");
  
  $("#login-pass")
  .bind("focus.labelFx", function(){
    $("#login-pass-label").hide();
  })
  .bind("blur.labelFx", function(){
    $("#login-pass-label")[!("#login-pass").value ? "show" : "hide"]();
  })
  .trigger("blur.labelFx");
  </code></pre>