Fade after Slide still Sliding

Fade after Slide still Sliding

Hello all,

Here's the situation:
I'll slideUp a div, load some ajax, then slideDown the result.
In the result, there are two more divs (navigation and 'subcontent' containers)
I have links in the navigation div that should fadeIn new content (via ajax) into the subcontent container.

Now, the fadeIn fadeOut functions operate correctly _until_ I use a slide on the larger div.  If I slide at all, everything turns into a slide, even within the subcontainers.  I'm not sure what's going on.

Here's an example structure for the divs:

  1. <div id="globalnav">Anchors/Links for the maincontent div</div>
  2. <div id="maincontent">"maincontent" should slide open and closed.
  3.   <div id="nav">Anchors/Links in here</div>
  4.   <div id="subcontent">This content should fadeIn and fadeOut</div>
  5. </div>

And here's some of the jquery I'm using:

  1. function subContent(el, data) {
  2.   // the el variable comes from the anchor tag
  3.   $('#subcontent')
  4.   .ajaxStart(function() {
  5.     $(this).fadeOut();
  6.   })
  7.   .load(el.attr('href'),data)
  8.   .ajaxStop(function() {
  9.     $(this).fadeIn();
  10.   });
  11. }

  13. function mainContent(el, data) {
  14.   // the el variable comes from the anchor tag
  15.   $('#itemTabs')
  16.   .ajaxStart(function() {
  17.     $(this).slideUp();
  18.   })
  19.   .load(el.attr('href'),data)
  20.   .ajaxStop(function() {
  21.     $(this).slideDown();
  22.   });
  23. }

To reiterate, fades work properly until a slide occurs, after that, the maincontent div slides on every anchor.  I feel like I'm missing something simple.  Any ideas?

Thanks!
-Trevor