Question

I am using jquery.cycle for slideshows. I am trying to get it to stop when my mouse leaves the designated area but the slideshow just starts up again but much slower (at regular speed without any options as if it has been called again). Anyone have any ideas of what I may be doing wrong?

 $('.summary').mouseenter(function(){
var vid_id=jQuery(".slideshow", this).attr('vid_id');

   jQuery(".slideshow", this).html('<img src="image_handler.php?s=002&ID='+vid_id+'" width="130" height="130"/><img src="image_handler.php?s=003&ID='+vid_id+'" width="130" height="130"/><img src="image_handler.php?s=004&ID='+vid_id+'" width="130" height="130"/><img src="image_handler.php?s=005&ID='+vid_id+'" width="130" height="130"/>');
         jQuery(".slideshow", this).cycle({
        fx: 'fade',
        speed: 500,
        timeout:500
    });
  }),
$(function(){
  $('.summary').mouseleave(function(){                           
      jQuery(".slideshow", this).cycle('stop'); 
  });

Answer 1

Try calling ‘destroy’ on mouseleave instead, this will stop the slideshow and unbind all events.