Home > DeveloperSection > Forums > How to jQuery - stop/ start a function?
ben reitman
ben reitman

Total Post:96

Points:676
Posted on    January-28-2015 10:11 PM

 ASP.Net JQuery  JavaScript 
Ratings:


 1 Reply(s)
 530  View(s)
Rate this:

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');



Alex Leblois
Alex Leblois

Total Post:67

Points:471
Posted on    January-28-2015 10:41 PM

You 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) {

    var l = this.length,

        current = 0,

        prev = 0,

        elements = this,

        timerId;

 

    if (this.filter('.active').length > 0) {

        current = this.index(this.filter('.active')[0]) + 1;

        prev = current - 1;

    }

 

    this.parent().hover(function(){

        clearTimeout(timerId);   

    },

    function(){

        timerId = setTimeout(next, timeout);         

    })

 

    function next() {

        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;

}; 


Don't want to miss updates? Please click the below button!

Follow MindStick