How to make an element's border flash?

Question

I want to flash or blink the border of a particular div when the user mouse over an element and stop flashing when mouse out. I have several elements that can user user mouseover. I need to flash the div every time when the user mouse over.

I have tried this.

#DivToolTip{ border: 3px solid white; }
#DivToolTip.red-border { border: 3px solid red; }

var flashInterval;

flashInterval = setInterval(function() { // called at mouseover
    $('#DivToolTip').toggleClass('red-border');
}, 1000);


window.clearInterval(flashInterval); // called at mouseout

but it not blinking properly, on the very first time it blinks properly after 1 sec when I mouseover on another element it blinks rapidly or more fast.

Any help is greatly appreciated

Answer 1

You can do this in pure CSS

Thereby keeping your separation of concerns by keeping CSS for your styling

HTML

<div class='borderBlink'>Border flash on hover</div>

CSS

@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: black    
    }    
}    
@keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: black    
    }    
}    
.borderBlink{    
    border:1px solid black;
    /* add 'border-color: transparent' if you wish no border to show initially */  
}
.borderBlink:hover {    
    -webkit-animation: borderBlink 1s step-end infinite;    
    animation: borderBlink 1s step-end infinite;    
}

Answer 2

Try:

var flashInterval;

$('#DivToolTip').hover(
    function () {
    flashInterval = setInterval(function () {
        $('#DivToolTip').toggleClass('red-border');
    }, 1000);
}, function () {
    clearInterval(flashInterval);
    $('#DivToolTip').removeClass('red-border');
});

DEMO

UPDATE

If you want to hover on an element and another one flashes then you should change your jQuery selectors based on the ids of your elements you want to perfom each action.

See updated DEMO

Answer 3

No need to use jQuery for this, you can do it fairly simply with CSS animations and keyframes:

First, set up your keyframe to set the border to red 50% of the time:

@keyframes blink { 
   50% { border-color: #ff0000; } 
}

Then set up the div (you can use an ID, class, or just any element) to use the animation:

.class:hover {
    animation: blink .5s step-end infinite alternate;
}

And set up a transparent border to start:

.class {
    border: 10px solid transparent;
}

Fiddle