When you hover over the ".homepage-modules"
container is it possible to stop the "next" function so it stops
cycling the active state and when you hover off the container the
"next" function starts firing again? I'm a bit stumped at the moment
and not sure of a way to do this
$('.homepage-modules div:first').addClass('active');
$.fn.cycle = function (timeout, cls) {
var l = this.length,
current = 0,
prev = 0,
elements = this;
if (this.filter('.active').length> 0) {
current = this.index(this.filter('.active')[0])+ 1;
prev = current- 1;
}
function next() {
elements.eq(prev).removeClass('active');
elements.eq(current).addClass('active');
prev = current;
current = (current+ 1) % l;
setTimeout(next,timeout);
}
setTimeout(next,timeout);
return this;
};
$('.homepage-modules div').cycle(2000, 'active');
Anonymous User
28-Jan-2015You should store the result of your setTimeout calls in a variable within your plugin. When the mouse is over your element you can use clearTimeout to stop the timer running, and when the mouse moves out you can start the timer again.
$.fn.cycle = function (timeout, cls) {
if (this.filter('.active').length > 0) {
this.parent().hover(function(){
function next() {var l = this.length,
current = 0,
prev = 0,
elements = this,
timerId;
current = this.index(this.filter('.active')[0]) + 1;
prev = current - 1;
}
clearTimeout(timerId);
},
function(){
timerId = setTimeout(next, timeout);
})
elements.eq(prev).removeClass('active');
elements.eq(current).addClass('active');
prev = current;
current = (current + 1) % l;
timerId = setTimeout(next, timeout);
}
timerId = setTimeout(next, timeout);
return this;
};