Featured Content Slider - Change on hover - slides flickering
<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>
