title: jQueryUI tabs: stop rotating while hover
body: <p>i build some rotatings tabs, using jqueryUI. While the user moves the mouse over the tabbed menu and tabbed content, the tabs should stop rotating. I read a <a href="http://urbanoalvarez.es/blog/2009/10/20/perfect-jquery-ui-rotating-tabs/" rel="nofollow">useful tutorial</a>, but it doesn't work for me. </p>
  
  <p>The tabs still keep rotating though i move the cursor over them. Once i hovered the <code>div#menu-prime</code>, the tabs behave silly!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#menu-prime").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
      $('#menu-prime').hover(function(){
              $(this).tabs('rotate', 0, false);
          },function(){
              $(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
          }
      );
  });
  &lt;/script&gt;
  
  &lt;div id="menu-prime"&gt;
  
      &lt;ul class="ui-tabs-nav"&gt;
          &lt;li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"&gt;&lt;a href="#fragment-1"&gt;Kochen&lt;/a&gt;&lt;/li&gt;
          &lt;li id="nav-fragment-2" class="ui-tabs-nav-item"&gt;&lt;a href="#fragment-2"&gt;Wohnen&lt;/a&gt;&lt;/li&gt;
          &lt;li id="nav-fragment-3" class="ui-tabs-nav-item"&gt;&lt;a href="#fragment-3"&gt;Schlafen&lt;/a&gt;&lt;/li&gt;
          &lt;li id="nav-fragment-4" class="ui-tabs-nav-item"&gt;&lt;a href="#fragment-4"&gt;Mehr&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt;Content 1&lt;/div&gt;
      &lt;div id="fragment-2" class="ui-tabs-panel" style=""&gt;Content 2&lt;/div&gt;
      &lt;div id="fragment-3" class="ui-tabs-panel" style=""&gt;Content 3&lt;/div&gt;
      &lt;div id="fragment-4" class="ui-tabs-panel" style=""&gt;Content 4&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>THANKS, 
  Johannes</p>
  
  <hr>
  
  <h2>EDIT: Enhancement</h2>
  
  <p>Thanks to Kim, the rotating tabs now wait when the user hovers one of the tabs.</p>
  
  <pre><code>$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000, true);
  $('#menu-prime').mouseover(function(){
      $(this).tabs('rotate', 0, false);
  });
  $('#menu-prime').mouseout(function(){
      $(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000);
  });
  </code></pre>
  
  <p>Originally wanted the tabs to change on mouseover not on click. Therefore i modified Kim’s code:</p>
  
  <pre><code>$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);
  $('#menu-prime').mouseover(function(){
      $(this).tabs('rotate', 0, false);
  });
  $('#menu-prime').mouseout(function(){
      $(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
  });
  </code></pre>
  
  <p><strong>Now the tabs and especially the auto-rotating behave very strange once the user hovered any tab. I guess the two mouseover-events complicate each other?</strong> </p>