CODEWITHSUNDEEP
javascriptjqueryhtml
Mika
Mika

Reputation: 335

Run function when not on hover

I've created a function that toggles the class click among siblings to show/hide them every 5 seconds

$(function() {
    var lis = $(".wwa-officers.class .news_item"),
        currentHighlight = 0;
        N = 5;//interval in seconds
    setInterval(function() {
        currentHighlight = (currentHighlight + 1) % lis.length;
        lis.removeClass('click').eq(currentHighlight).addClass('click');
    }, N * 1000);
});

But I want it to stop when the mouse is hovering the element to allow the users to read the info displayed in each element

I've tried the following, but doesn't seem to be working...

$(function(){
    $('.wwa-officers').on('mouseenter mouseleave', function(){
        $(this).toggleClass('class');
    });
});

Upvotes: 0

Views: 76

Answers (1)

nAviD
nAviD

Reputation: 3261

Try this :

  ...
 setInterval(function() {
      if(!$('.wwa-officers').hasClass('class')){
        currentHighlight = (currentHighlight + 1) % lis.length;
        lis.removeClass('click').eq(currentHighlight).addClass('click');
      }
    }, N * 1000);
...

Upvotes: 1

Related Questions