How can I add a pause to this jquery function?

Question

I have been trying to figure out how to make this function pause on mouseover, and continue on mouseout. I have figured out how to pause the function on mouseover, but it doesnt start up again on mouseout. Here is the jQuery code (Used from another tutorial).

function swapImages(){  
 var $active = $('#myGallery .active');    
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');  
 $active.fadeOut(function(){     
$active.removeClass('active');      
$next.fadeIn().addClass('active'); }); }  

 $(document).ready(function(){setInterval('swapImages()', 5000);}  
 $('#myGallery').mouseover(function(){ 
 $(this).delay(60000);
});

Answer 1

Use jQuery's hover

$( selector ).hover( handlerIn, handlerOut )

Short for

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Answer 2

You have to save a reference to the setinterval(). On mouseover you clear the interval, thus stopping the slideshow. In the example below I've taken the liberty of restarting it on mouseover again. Can be done easier, but this explains better.

var slideshow;
$(document).ready(function(){
    slideshow = setInterval( swapImages, 5000);


    $('#myGallery')
        .mouseover(function(){ clearInterval( slideshow ) })
        .mouseout(function(){ slideshow = setInterval( swapImages, 5000); });
});

Answer 3

I guess you are asking for something like the following:

$('#hello').mouseout(function() {
    /*script to execute*/
});

Demo