CODEWITHSUNDEEP
javascriptjquery
Hil
Hil

Reputation: 429

How to stop blink when hovered

I want the blinking to stop when ever the button is hovered. Any ideas for this?

      function blinker() {
        $( & #39;.blinking&# 39;).fadeOut(1000);
        $( & #39;.blinking&# 39;).fadeIn(1000);
      }
      setInterval(blinker, 4000);

Upvotes: 0

Views: 315

Answers (1)

Tanguy A.
Tanguy A.

Reputation: 155

You can store a handler on your interval, and use it to clear it when your button is hovered:

function blinker() {
    $('.blinking').fadeOut(1000);
    $('.blinking').fadeIn(1000);
}
intervalHandler = setInterval(blinker, 4000);

$('.blinking').mouseover(function() {
    clearInterval(intervalHandler);
    intervalHandler = undefined;
});

If you wish the blinking to be active again whenever the button is not hovered anymore, you can set the interval back:

$('.blinking').mouseout(function() {
    if (!intervalHandler) {
        intervalHandler = setInterval(blinker, 4000);
    }
});

By setting the handler to undefined when the interval is cleared, you ensure to never set the interval twice, which would prevent you to clear them both and will make the blinking persistent.

I edited my answer thanks to @Luger's comment.

Upvotes: 2

Related Questions