title: jQuery tabs callback after "show" animation
body: <p>I have a link to a jQuery UI tab, which needs to show the tab, then scroll it into view. My first instinct was to use the basic <code>$('selector').tabs('option','active',1)</code> to show it, then bind a callback to the tabsactivate event to animate the body element's scrollTop to the offset of the tabs container. Should be simple, right? But when I click the link, the page doesn't scroll unless the tab is already active.</p>
  
  <p>After much poking around, I discovered the problem: there's a 150 millisecond fade-in animation on the tab, and tabsactivate fires before the animation has completed. So when I try to grab its offset, it's 0, because the tab hasn't actually been shown yet. I'm pretty sure this is the cause, because if I remove the show/hide animations it works as expected.</p>
  
  <p>So in a nutshell, my question is, <strong>is it possible to bind a callback to the built in tabs "show" animation</strong> so that it won't fire until the animation is finished?</p>
  
  <p>If not, what would be a good workaround?</p>
  
  <p><strong>Edit:</strong> The problem may not have been what I thought after all... posting code below.</p>
  
  <h2>Code (extremely messy and not very optimized)</h2>
  
  <pre><code>&lt;script&gt;
  $(function() {
  
  $('.select-tab').click(function(e){
      var $target = $('#'+this.href.split("#")[1]),
          tabindex = $target.index('.ui-tabs-panel'),
          $tabParent = $target.parents('.ui-tabs-container');
      $tabParent.tabs('option','active',tabindex);
      e.preventDefault();
  });
  
  $(".scroll").each(function(){
      var $this = $(this),
          $target = $('#'+this.href.split("#")[1]),
          $tabParent = $target.parents('.ui-tabs-container'),
          clickHandler;
  
      function clickHandler(){
          $('html,body').animate({"scrollTop":$target.offset().top},500,'easeOutCubic');
      }
  
      if( $this.hasClass('select-tab') &amp;&amp; $target.hasClass('ui-tabs-panel') ){
          $this.click(function(e){
              if( $target.index('.ui-tabs-panel') == $tabParent.tabs('option','active') ){
                  clickHandler();
              } else{
                  $(document).one('tabsactivate',$tabParent,function(e,ui){
                      clickHandler();
                  });
              }
          });
      } else{
          $this.click(clickHandler);
      }
  });
  
  });
  &lt;/script&gt;
  
  &lt;a class="select-tab scroll" href="#ProductReviews"&gt;
      Read all 36 Reviews
  &lt;/a&gt;
  
  &lt;div class="ui-tabs-container ui-tabs ui-widget ui-widget-content ui-corner-all"&gt;
  &lt;ul id="product_tabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"&gt;
      &lt;li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"&gt;
          &lt;a href="#RelatedProducts"&gt;Related Products&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="ui-state-default ui-corner-top"&gt;
          &lt;a href="#ProductReviews"&gt;Product Reviews&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="ui-state-default ui-corner-top"&gt;
          &lt;a href="#OrderWithConfidence"&gt;Order With Confidence&lt;/a&gt;
      &lt;/li&gt; 
  &lt;/ul&gt;
  &lt;div id="RelatedProducts" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;
      &lt;!-- Stuff Here --&gt;
  &lt;/div&gt;
  &lt;div id="ProductReviews" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden"&gt;
      &lt;!-- Stuff Here --&gt;
  &lt;/div&gt;
  &lt;div id="OrderWithConfidence" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden"&gt;
      &lt;!-- Stuff Here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>