Writing jquery in a professional and clean way
I'm new to writing jquery. I am always writing jquery at work, but I want to write code at at level where it looks professional and clean. Can you give me any tips? Also, simplified this to give me an example.

=======HTML==========

    <code>
    <div id="sign-in" class="column span-7 last"> <a class="sign-in" href="#" title="Sign In">&nbsp;</a>
              <form class="nav-sign-in">
                <div class="entry">
                  <label for="username">Username or Email Address</label>
                  <input name="username" t`enter code here`ype="text" tabindex="1">
                </div>
                <div class="entry">
                  <label for="password">Password</label>
                  <input name="password" type="text" tabindex="2">
                </div>
                <div class="entry">
                  <div class="forgot-sign-in"><span><a href="#" title="Forgot Password?">Forgot Password?</a></span></div>
                  <div class="forgot-sign-in"><a class="sign-in-account" href="#" title="Sign In">&nbsp;</a></div>
                </div>
                <div class="entry"> <a class="create-account" href="#" title="Create a free Megatouch Live Account">&nbsp;</a> </div>
              </form> 
              <div id="welcome" class="column span-7 last">
              <p>Hello [Username].</p>
              <p>Thanks for signing in. Account management
                is coming soon. Please continue to use the 
                ML-1 until available. Thanks!</p>
              <a class="sign-out-account" href="#" title="Sign Out">&nbsp;</a> </div>
          </div>
    </code>
    =======JQUERY==========
    
    <code>
        $(document).ready(function () {
          $(".sign-in").click(function () {
            $(".nav-sign-in").slideDown();
         });
        $(".sign-in-account").click(function () {
    		$(".sign-in").fadeOut("fast");
            $(".nav-sign-in").slideUp("normal", function () {
             	$("#welcome").slideDown(function(){
    				$(".sign-in").removeClass("sign-in")
    				.addClass("sign-out-account")
    				.css("margin-top", "5px")
    				.fadeIn("fast");
    			});
            });
        });    
    	$(".nav-sign-in, #welcome").mouseleave(function () {
            $(".nav-sign-in, #welcome").slideUp();
        });
     });
    </code>
Writing jquery in a professional and clean way
===

I'm new to writing jquery. I am always writing jquery at work, but I want to write code at at level where it looks professional and clean. Can you give me any tips? Also, simplified this to give me an example.

=======HTML==========

    <code>
    <div id="sign-in" class="column span-7 last"> <a class="sign-in" href="#" title="Sign In">&nbsp;</a>
              <form class="nav-sign-in">
                <div class="entry">
                  <label for="username">Username or Email Address</label>
                  <input name="username" t`enter code here`ype="text" tabindex="1">
                </div>
                <div class="entry">
                  <label for="password">Password</label>
                  <input name="password" type="text" tabindex="2">
                </div>
                <div class="entry">
                  <div class="forgot-sign-in"><span><a href="#" title="Forgot Password?">Forgot Password?</a></span></div>
                  <div class="forgot-sign-in"><a class="sign-in-account" href="#" title="Sign In">&nbsp;</a></div>
                </div>
                <div class="entry"> <a class="create-account" href="#" title="Create a free Megatouch Live Account">&nbsp;</a> </div>
              </form> 
              <div id="welcome" class="column span-7 last">
              <p>Hello [Username].</p>
              <p>Thanks for signing in. Account management
                is coming soon. Please continue to use the 
                ML-1 until available. Thanks!</p>
              <a class="sign-out-account" href="#" title="Sign Out">&nbsp;</a> </div>
          </div>
    </code>
    =======JQUERY==========
    
    <code>
        $(document).ready(function () {
          $(".sign-in").click(function () {
            $(".nav-sign-in").slideDown();
         });
        $(".sign-in-account").click(function () {
    		$(".sign-in").fadeOut("fast");
            $(".nav-sign-in").slideUp("normal", function () {
             	$("#welcome").slideDown(function(){
    				$(".sign-in").removeClass("sign-in")
    				.addClass("sign-out-account")
    				.css("margin-top", "5px")
    				.fadeIn("fast");
    			});
            });
        });    
    	$(".nav-sign-in, #welcome").mouseleave(function () {
            $(".nav-sign-in, #welcome").slideUp();
        });
     });
    </code>