Question

Haven’t seen this before so hopefully someone has a easy solve, I have a 3 feature panel divs side by side, what I want happen is the 1st panel has a “hover” class added so I can change the background etc and then on a timed interval the hover class jumps to the next panel then the next panel then back to the start on a loop.

Also on a side note can you keep the code in mind to be able to add more then 3 feature divs so you could have for example 6 or more or less etc.

Answer 1

jsBin demo

var box=$('.box'), c=0;
function loop(){
   box.removeClass('active').eq(c++%box.length).addClass('active');
}loop();
setInterval(loop, 1000);

You can add boxes at whish!

EDIT: stop loop on hover and continue from last hovered

jsBin demo 2

var box=$('.box'), c=0, int;
function tglClass(){   
   box.removeClass('active').eq(c++%box.length).addClass('active');
}
function loop(){
   int=setInterval(tglClass,1000);
}loop();
box.on('mouseenter mouseleave',function(e){
   c=$(this).index();  
   var evt=e.type=='mouseenter' ? (tglClass())(clearInterval(int)) : loop();
});

In this solution you don’t even need the CSS :hover state!