Trouble with jQuery Animation
<p>I'm fairly new to jQuery and I'm having trouble with an animation that I'd like to do.</p>

<p>Say I have some drops downs to filter content that use this HTML:</p>

<pre><code>&lt;table class="calFilter"&gt;
    &lt;tr&gt;
     &lt;th&gt;
      &lt;label for="ddlDept"&gt;Show events hosted by:&lt;/label&gt;
     &lt;/th&gt;
     &lt;th&gt;
      &lt;label for="ddlEventType"&gt;Select event type:&lt;/label&gt;
     &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;
      &lt;select name="ddlDept" id="ddlDept" class="deptDropDown"&gt;
       &lt;option value=""&gt;All&lt;/option&gt;
       &lt;option value="cfys"&gt;Community, Family, &amp;amp; Youth Services&lt;/option&gt;
       &lt;option value="conser"&gt;Conservation Board&lt;/option&gt;
       &lt;option value="emergm"&gt;Emergency Management&lt;/option&gt;
       &lt;option value="health"&gt;Health Department&lt;/option&gt;
      &lt;/select&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;select name="ddlEventType" id="ddlEventType"&gt;
       &lt;option value="0"&gt;All&lt;/option&gt;
      &lt;/select&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;input type="submit" name="cmdGo" value="Go" id="cmdGo" /&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>If you select a different department, the event types no longer make sense, so I'd like to hide the Event Type label and drop down when the Dept drop down changes. I got this to work using the change event callback for the drop down and the simple <code>hide()</code> command.</p>

<p>But if I try to use animation, things go haywire. The controls don't slide the way I would expect, the animation occurs every time even if the controls are already hidden, etc.</p>

<p>I would like some sort of nice fade or slide, or some combination of those two. How would you do this?</p>
