title: Show/Hide divs on form submit
body: <p>I have worked out about 90% of this, but can't seem to get the last 10%:</p>
  
  <p>I have a form that asks the user to select a location. On select, I want the page (and the request form) to fade in opacity, and a new div to fade up on top with pricing information.</p>
  
  <p>Right now, everything works as expected for the first selected option (novato), but on any other option in the list, the page and request form divs both fade out, and the new pricing div isn't visible.</p>
  
  <p>I'm stumped, and pretty sure I'm just missing something stupid (being a newbie). Any help is appreciated!</p>
  
  <p>the request form:</p>
  
  <pre><code>&lt;form id="locations"&gt;
  &lt;select&gt;
  &lt;option&gt;Choose a location&lt;/option&gt;
  &lt;option&gt;&lt;/option&gt;
  &lt;option id="novato" value="novato"&gt;Novato&lt;/option&gt;
  &lt;option id="sanleandro" value="sanleandro"&gt;San Leandro&lt;/option&gt;
  &lt;option id="livermore" value="livermore"&gt;Livermore&lt;/option&gt;
  &lt;option id="sanjose" value="sanjose"&gt;San Jose&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit" id="submit" value="go"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The JS:</p>
  
  <pre><code>&gt; $(function() {
  &gt;   $("#locations").submit(function() {
  &gt;       if ($("#novato").attr("selected")) {
  &gt;           $("#pricing_novato").fadeIn("normal");
  &gt;           $("#page").fadeTo("normal", 0.1);
  &gt;           $("#pricing_novato").css({top:"0",left:"50%",margin:"20px
  &gt; 0 0 -"+($("#pricing_novato").width() /
  &gt; 2)+"px"});
  &gt;           $("#pricing_selector").fadeOut("normal");       
             }else if($("#sanleandro").attr("selected")) {
  &gt;           $("#pricing_sanleandro").fadeIn("normal");
  &gt;           $("#page").fadeTo("normal", 0.1);
  &gt;           $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px
  &gt; 0 0
  &gt; -"+($("#pricing_sanleandro").width() / 2)+"px"});
  &gt;           $("#pricing_selector").fadeOut("normal");       
             }else if($("#livermore").attr("selected")) {
  &gt;           $("#pricing_livermore").fadeIn("normal");           $("#page").fadeTo("normal", 0.1);
  &gt;           $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px
  &gt; 0 0
  &gt; -"+($("#pricing_livermore").width() / 2)+"px"});
  &gt;           $("#pricing_selector").fadeOut("normal");       
             }else if($("#sanjose").attr("selected")) {
  &gt;           $("#pricing_sanjose").fadeIn("normal");
  &gt;           $("#page").fadeTo("normal", 0.1);
  &gt;           $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px
  &gt; 0 0 -"+($("#pricing_sanjose").width()
  &gt; / 2)+"px"});
  &gt;           $("#pricing_selector").fadeOut("normal");       
             } 
    }); 
  });
  </code></pre>
  
  <p>The divs:</p>
  
  <pre><code>&lt;div id="pricing_novato"&gt;content&lt;/div&gt;
  &lt;div id="pricing_sanleandro"&gt;content&lt;/div&gt;
  &lt;div id="pricing_livermore"&gt;content&lt;/div&gt;
  &lt;div id="pricing_sanjose"&gt;content&lt;/div&gt;
  </code></pre>