CODEWITHSUNDEEP
javascriptjquerycss
Harish
Harish

Reputation: 455

How to make an element's border flash?

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

Upvotes: 22

Views: 38522

Answers (5)

Bae Cheol Shin
Bae Cheol Shin

Reputation: 1528

I have plain Javascript version

<script type="text/javascript">
var flash;

function flashBorder(elmId, stopFlash)
{
    var elm = document.getElementById(elmId);  
    if(stopFlash == "true")
    {
        elm.style.border = "";
        clearInterval(flash);
    }
    else
    {
        var borderPattern = false;
        flash = setInterval(setBorder,300);

        function setBorder()
        {
            if(borderPattern)
            {
                borderPattern = false;
                elm.style.border = "solid white";
                elm.style.borderWidth = "3px";
            }
            else
            {
                borderPattern = true;
                elm.style.border = "solid blue";
                elm.style.borderWidth = "3px";
            }
        }
    }
}
</script>

<div id="FLASH_ME" onmouseenter="flashBorder('FLASH_ME', 'false')" onmouseleave="flashBorder('FLASH_ME', 'true')">Hello Friends!</div>

Upvotes: 0

moeiscool
moeiscool

Reputation: 1426

CSS:

[class*="fI_"]{
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
.fI_bg *:not(.btn),.fI_bo *:not(.btn){color:#fff}
.fI_bg{
    animation-name:fI_bg;
}
.fI_bo{
    animation-name:fI_bo;
}
@keyframes fI_bg{
0%{background-color:#0D78BD;}25%{background-color:#1C3B50;}50%{background-color:#0D78BD;}75%{background-color:#1C3B50;}100%{background-color:#0D78BD;}
}
@keyframes fI_bo{
0%{border-color:#0D78BD;}25%{border-color:#1C3B50;}50%{border-color:#0D78BD;}75%{border-color:#1C3B50;}100%{border-color:#0D78BD;}
}

jQuery Alternative : 

$.fn.fI=function(e){//Flash Item
    if(!e){e={}}
    if(this){e.e=this}
    switch(e.f){
        case 0:
        break;
        default:
            switch(e.css){
                case 0:
                    e.d='background-color'
                break;
                case undefined:
                    e.d='border-color'
                break;
                default:
                    e.d=e.css
                break;
            }
            if(!e.c1){e.c1='#1D89CF'}
            if(!e.c2){e.c2='#1aae88'}
            if(!e.p){e.p=200}
            e.e.css(e.d,e.c1)
            setTimeout(function(){
                e.e.css(e.d,e.c2)
                setTimeout(function(){
                    e.e.css(e.d,e.c1)
                    setTimeout(function(){
                        e.e.css(e.d,e.c2)
                        setTimeout(function(){
                            e.e.css(e.d,'')
                        },e.p)
                    },e.p)
                },e.p)
            },e.p)
        break;
    }
    return this
}

Use like this:

does border if you leave css undefined

$('#elementid').fI()

does if you do 0 it will do background-color, and anything else will be the become the property. so you can do font color or box-shadow like this:

$('#elementid').fI({css:'color'})
$('#elementid').fI({css:'box-shadow',c1:'0 0 10px #333',c2:'0 0 5px #F00'})

does background

$('#elementid').fI({css:0})

use different colors and set interval in miliseconds

$('#elementid').fI({c1:'#fff',c2:'#F00',p:1000})

Upvotes: 0

laaposto
laaposto

Reputation: 12213

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

Upvotes: 5

SW4
SW4

Reputation: 71140

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;    
}

Upvotes: 43

Samsquanch
Samsquanch

Reputation: 9146

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

Upvotes: 5

Related Questions