title: Featured Content Slider - Change on hover - slides flickering
body: <p>can anyone help?</p>
  
  <p>I've added a <a href="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/" rel="nofollow">featured content slider</a> to a website I'm developing for a client, and and one of the comments they've asked is whether the slide transition can occur on hover, and then when clicking on the slide (or indeed the ui-tabs) taken to the destination URL.</p>
  
  <p>The jQuery I've got is the standard that comes along with the demo (I'm still learning you see)</p>
  
  <pre><code>    $(document).ready(function(){  
      $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
      $("#featured").hover(  
      function() {  
          $("#featured").tabs("rotate",0,true);  
      },  
      function() {  
      $("#featured").tabs("rotate",5000,true);  
      }  
      );
      });
  </code></pre>
  
  <p>It has the added 'pause on hover' function.</p>
  
  <p>Anyhow, the HTML for the tabs is as below:</p>
  
  <pre><code>  &lt;ul class="ui-tabs-nav"&gt;
      &lt;li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"&gt;&lt;a href="#fragment-1"&gt;&lt;span class="panelTitle"&gt;Find a&lt;br /&gt;
        &lt;span class="panelTitleMain"&gt;Boat&lt;/span&gt;&lt;/span&gt; &lt;span class="panelCopy"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="ui-tabs-nav-item" id="nav-fragment-2"&gt;&lt;a href="#fragment-2"&gt;&lt;span class="panelTitle"&gt;Find an ABYA&lt;br /&gt;
        &lt;span class="panelTitleMain"&gt;Broker&lt;/span&gt;&lt;/span&gt; &lt;span class="panelCopy"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="ui-tabs-nav-item" id="nav-fragment-3"&gt;&lt;a href="#fragment-3"&gt;&lt;span class="panelTitle"&gt;TBC&lt;br /&gt;
        &lt;span class="panelTitleMain"&gt;TBC&lt;/span&gt;&lt;/span&gt; &lt;span class="panelCopy"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;&lt;/a&gt;&amp;lt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>I've managed to get the slider to change on mouseover with the following, but now the images are flickering when loading.</p>
  
  <pre><code>$("#featured").tabs({event: 'mouseover', fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
  $("#featured").hover(  
  function() {  
      $("#featured").tabs("rotate",0,true);  
  },  
  function() {  
  $("#featured").tabs("rotate",5000,true);  
  }  
  ); 
  </code></pre>
  
  <p>Any ideas?</p>