jQuery API counter++ pause on hover and then resume
- by Rory
I need to have this counter pause {stay on current div) while mouseover or hover and resume counter when mouseout. I have tried many ways but still new to jQuery API.
<div id="slide_holder">
<div id="slide1" class="hidden">
<img src="images/crane2.jpg" class="fill">
</div>
<div id="slide2" class="hidden">
<img src="images/extend_boom.png" class="fill">
</div>
<div id="slide3" class="hidden">
<img src="images/Transformers-Bumblebee.jpg" class="fill">
</div>
<script>
$(function () {
var counter = 0,
divs = $('#slide1, #slide2, #slide3');
function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.fadeIn('slow'); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
setInterval(function () {
showDiv(); // show next div
}, 3 * 1000); // do this every 10 seconds
});
</script>
