title: How to add a cross fade to UI tabs?
body: <p>Hi I copy question from <a href="http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs" rel="nofollow">http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs</a>, because I have same question.</p>
  
  <p>Hi all</p>
  
  <p>I have set up a tabbed interface using standard UI tab code.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
  $("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true')
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>At the moment the tab that is one display fades out, leaving a white space before the next tab appears.</p>
  
  <p>What I would like to happen is as tab1 fades out, tab 2 fades in - creating a cross fade.</p>
  
  <p>Can anyone tell me how to achieve this?</p>
  
  <p>Thanks in advance</p>