title: jQuery Slider (div sticks to the side)
body: <p>I currently have a slideshow-like script I wrote on a site:
  <a href="http://mdunbarconsulting.com/design-m/" rel="nofollow">http://mdunbarconsulting.com/design-m/</a></p>
  
  <p>I am trying to adapt this to actually "slide" the div, rather than shrinking the width.  You can click to change tabs or wait (every 15 secs the tab changes).</p>
  
  <p>Notice how when changing from tab 1 to another tab the text wraps because the width shrinks.</p>
  
  <p>I have tried <code>$("#content" + newTab).show('slide', {direction: 'left'}, 1000);</code> BUT when I use that the entire div slides (as I hoped, BUT) then the tabs to the right of it moves beside it (too late).</p>
  
  <p>How can I make the current tab slide out as a block, while keeping the tab(s) to the right beside it throughout the animation?</p>
  
  <p>The javascript:</p>
  
  <pre><code>var countDownStart = 10;
  var countDown = countDownStart;
  var currentTab = 1;
  doCountdown();
  function doCountdown() {
      setTimeout(
          function () {
              countDown -= 1;
              if(countDown == 0) {
                  if((currentTab+1) == 10) {
                      switchTabs(1)
                  } else {
                      switchTabs(currentTab+1)
                  }
              }
              doCountdown();
          },1000
      );
  }
  function switchTabs(newTab) {
      if(newTab != currentTab) {
          var newWidth = $("#content" + currentTab).width();
          $("#content" + currentTab).animate({width:0});
          $("#content" + newTab).animate({width:newWidth});
          currentTab = newTab;
      }
      countDown = countDownStart;
  }
  function resizeTabs(newSize) {
      $("#content" + currentTab).animate({width:newSize});
  }
  $(".tab").click(
      function() {
          var tabId = parseInt(this.id.substr(-1));
          switchTabs(tabId);
      }
  );
  </code></pre>