Force jQuery content slider to pause on hover

Question

I would be grateful if someone can help with with some javascript code. I have a content slider which can be found here:-

link text

This works fine but I would like to change the following code so that it pauses on hover. Any ideas?

<script type="text/javascript">
$(document).ready(function(){
 $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

Thanks in advance of your help.

Kind regards

Jonathan

Answer 1

What you're looking for is the stop method. Something along the lines of:

$(".ui-tabs-panel").mouseover(function(e) {
    if($(this).is(':animated')) {
        $(this).stop();
    }
});

Answer 2

Looks like you're using jQuery.UI. Here's how i've done it in the past using the same library (courtesy of this tutorial):

$(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);  
        }  
    );  
});