jQuery Forum

I have a series of slideshows on a single page. They activate (independently) on mouseover. 

At present, the slideshows pause on mouseout. I would like for each of them to return (paused) to the first slide instead. Ideally this return to the first slide would also be a fade transition.

The code in place at the moment is as follows:

2. <script src="/scripts/js/jquery.cycle.min.js"></script>
3. 
   
4. <script type="text/javascript">
5. $(document).ready(function() {
6.    $('div.gallery').cycle({
7.        fx: 'fade',
8.        speed:    500, 
9.        timeout:  1600
10.    });
12.    $("div.gallery").cycle('pause'); //we pause the animation by default
14.    $("div.gallery").mouseover(function(){
15.      $(this).cycle('resume');
16.    }).mouseout(function(){
17.      $(this).cycle('pause');
18.    });
19. });
20. </script>

I have a live test page which you can see here: 

Any help is greatly appreciated!

David