Stop on mouse over on a simple jquery slider

Question

I have a real simple jquery slider, it fits well for my use. Just linked images, no controls, thumbs, nothing, really simple! I'm trying to make it stoo while the mouse cursor is over it, but i wasn't able to. Can anyone help me here? slider.js ``` function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 10000 ); }); ``` slider.css ``` #slideshow { height: 300px; position: relative; width: 960px; } #slideshow a { left: 0; opacity: 0.0; position: absolute; top: 0; z-index: 8; } #slideshow a.active { opacity: 1.0; z-index:10; } #slideshow a.last-active { z-index: 9; } ``` HTML ```

<…

Accepted Answer

You'll want to clear the interval on mouseenter, then start the slider again on mouseleave. You can use jQuery's hover() function as a shortcut:

Working Demo

```
$(function() {
    var interval = setInterval( slideSwitch, 10000 );

$('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});
```

Stop on mouse over on a simple jquery slider

Solution

Problem