如何使元素的边框闪烁？

Question

我想在用户将鼠标悬停在某个元素上时闪烁或闪烁特定 div 的边框，并在鼠标移出时停止闪烁。我有几个元素可以让用户鼠标悬停。每次用户鼠标悬停时，我都需要刷新 div。

我试过了。

#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

但它没有正确闪烁，第一次它在 1 秒后正确闪烁，当我将鼠标悬停在另一个元素上时它会快速或更快地闪烁。

非常感谢任何帮助

Answer 1

You can do this in pure CSS

从而通过为您的样式保留 CSS

来保持您的关注点分离

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

试试：

var flashInterval;

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

DEMO

更新

如果您想将鼠标悬停在一个元素上并且另一个元素闪烁，那么您应该根据您想要执行每个操作的元素的 ID 更改您的 jQuery 选择器。

查看更新的DEMO

Answer 3

不需要为此使用 jQuery，您可以使用 CSS animations and keyframes 相当简单地做到这一点：

首先，设置您的关键帧以将 50% 的时间设置为红色：

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

然后设置 div（您可以使用 ID、类或任何元素）以使用动画：

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

并设置透明边框开始：

.class {
    border: 10px solid transparent;
}

Fiddle

Answer 4

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 替代方案：

$.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
}

这样使用：

如果你不定义 css 会做边框

$('#elementid').fI()

如果你做 0 它会做背景颜色，其他任何东西都将成为属性。所以你可以像这样做字体颜色或框阴影：

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

做背景

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

使用不同的颜色并以毫秒为单位设置间隔

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

Answer 5

我有纯 Javascript 版本

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