jquery - h3 フェードインまたはフェードアウト後のシフト

Question

私はこのウェブサイトの再設計を終えており、それにいくつかの楽しい新しい機能を追加したいと考えていました. フッターに連絡先フォームをネストして見えないようにしていますが、気になりません。:pスクリプトは非常にうまく機能しておりfadeToggle、トリックはうまく機能しますが、クリック要素として機能するメインヘッダーは、アクティブにすると左右にひきつるように見えます。liを隠しているだけで、ulまたはを隠していないh3ので、なぜ動いているのかわかりません。どんなアイデアでも大歓迎です！これは私にとって生か死かではありませんが、私を悩ませています。

ライブサイト

修正前のjsFiddle

jsFiddle が修正されました

HTML

<div class="formS">
    <span class="footerT">© Copyright 2013 Ohio Association of Health Underwriters</span>
    <form action="" method="post">
      <ul>
        <h4>Contact Us (click here)</h4>
        <input type="hidden" name="subject" value="Submission" /> 
        <input type="hidden" name="redirect" value="thankyou.html" />
        <li><label for="name">Name</label>
        <input type="text" name="name" id="name"></li>

        <li><label for="zip">Zip</label>
        <input type="text" name="zip" id="zip"></li>

        <li><label for="city">City</label>
        <input type="text" name="city" id="city"></li>

        <li><label for="telephone">Telephone</label>
        <input type="text" name="telephone" id="telephone"></li>

        <li><label for="email">Email</label>
        <input type="text" name="email" id="email"></li>

        <li><label for="comments">I would like to know:</label>
        <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>

        <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li>

        <input type="hidden" name="form_order" value="alpha"/>
        <input type="hidden" name="form_delivery" value="hourly_digest"/>
        <input type="hidden" name="form_format" value="text"/>
      </ul>
  </form>
</div>

CSS

/* Contact form page */

.formS {
width: 960px;
margin: 0 auto;
padding: 0;
}

form > ul           {
font-size: 18px;
padding: 0;
margin: 0;
float: right;
    list-style-type:none;
}

form > ul > li {
padding: 5px;
display: none;
}

form { 
text-align:left; 
padding: 0 10px 10px 10px;
height: 408px;
}

.formS > form > ul > li > label     {
float: left;
width: 50px;
margin:5px 10px 0 0;
text-align:right;
display:block;
background:none;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

input:focus, textarea:focus {
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #fff;
text-shadow: 0 1px 0 #2b2b2b;
}

textarea {
width: 150px; 
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
resize: vertical;
}

.formS > form > ul > li > input {
width: 150px; 
height: 15px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
}

jQuery

$('form ul h4').on('click', function() { 
    $('form > ul > li').stop(true).fadeToggle(1500); 
});

(PS 入力タグは a の中に入れられないことは知っていますul。現在、この連絡先フォームで以前の開発者の間違いを修正しています >.>。