title: jquery: using slideDown and animating opacity with a tabbed container
body: <p><strong>THE AIM</strong></p>
  
  <p>To create a tabbed interface, animated such that when you click on a different tab, the content fades out, then the container resizes (by sliding up or down), and then the new content fades in.</p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>I've successfully made a tabbed interface that works but I'm having trouble animating it how I want it. When you click on a tab, the panel slides down, you catch a glimpse of the text fading in but then it slides back up again - and I have no clue as to why.</p>
  
  <p>This is my first time using jquery and I'd really appreciate it if someone would take a quick look and find out what I've done wrong/how to fix it. It's quite a simple project so I doubt it'll be very difficult for someone who knows what they're doing!</p>
  
  <p>Here's the jsfiddle: <a href="http://jsfiddle.net/dronzy/MKmTK/" rel="nofollow">http://jsfiddle.net/dronzy/MKmTK/</a></p>
  
  <p>Here's what the javascript looks like:</p>
  
  <pre><code>$(document).ready(function () {
      $('#tabs li a:not(:first)').addClass('inactive');
      $('.content:not(:first)').animate({
          opacity: "0"
      }, 0);
      $('.panel:not(:first)').hide();
      $('#tabs li a').click(function () {
          var t = $(this).attr('href');
          var s = $(this).attr('data-name');
          if ($(this).hasClass('inactive')) {
              $('#tabs li a').addClass('inactive');
              $(this).removeClass('inactive');
              $('.content').animate({
                  opacity: "0"
              }, 600, function () {
                  $('.panel').slideUp();
              });
              $(s).slideDown(600, function () {
                  $(t).animate({
                      opacity: "1"
                  }, 600)
              });
          }
          return false;
      })
  });
  </code></pre>
  
  <p>Thanks in advance!</p>