Jquery CSS发光效果计时

我正在研究一个可以激活或停用的按钮。当它被激活时，我希望每五秒钟左右出现一次闪光效果。我一直在看这把小提琴

并试图重新设计它，使我的按钮周围的div将与类“图标效果”切换，创建光泽效果，然后在大约一秒钟后关闭，然后它将每五秒钟这样做。我编辑了小提琴以创建div

<div id = 'my_button_div>
<div>

这是小提琴

---

但我似乎无法让它发挥作用。我把悬停的东西放在那里了，但它应该会在指定的时间触发闪光效果

您发布的JSFIDLE有几个问题：

它没有导入jQuery，这意味着不会定义

$

在实际元素上切换

图标效果

类，但它应该在子元素上

在JavaScript中引用时，实际元素的id中有一个空格

.icon effect

子元素与

#my_button_div

元素分开定义（它需要在其中）

---

这里有一个固定的JSFIDLE:

您有一些编码错误需要首先解决：

更改此选项：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

对此：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

---

现在，要无缝地使用中的样式，您需要将

class=“icon”

添加到

中，并在其中嵌套

像这样：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

变成这样：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

还有这个：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

变成这样：

<div id = 'my_button_div>
<div>

<div id="my_button_div"></div>

$('#my_ button_div').toggleClass('…');

$('#my_button_div').toggleClass('…');

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

$('#my_ button_div').toggleClass('icon-effect');

$('#my_ button_div').toggleClass('triggered');

setInterval（函数（）{
$（'my#u button_div'）。toggleClass（'triggered'）；
setTimeout（函数（）{
$（'my#u button_div'）。toggleClass（'triggered'）；
}, 1000);
}, 5000);
/*图标*/
.图标{
显示：块；
宽度：32px；
高度：32px；
背景：红色；
位置：相对位置；
溢出：隐藏；
}
/*“发光”元素*/
/*可能是伪元素，但在某些浏览器中它们不支持CSS转换*/
.图标.图标效果{
位置：绝对位置；
前-110%；
左-210%；
宽度：200%；
身高：200%；
不透明度：0；
背景：rgba（255，255，255，0.2）；
背景：-moz线性梯度(
左边
rgba（255，255，255，0.1）0%，
rgba（255，255，255，0.1）75%，
rgba（255，255，255，0.5）90%，
rgba（255，255，255，0.0）100%
);
背景：-webkit线性梯度(
顶部
rgba（255，255，255，0.1）0%，
rgba（255，255，255，0.1）75%，
rgba（255，255，255，0.5）90%，
rgba（255，255，255，0.0）100%
);
背景：-webkit渐变(
线性，左上，右上，
颜色停止（0%，rgba（255，255，255，0.2）），
颜色停止（75%，rgba（255，255，255，0.2）），
颜色停止（90%，rgba（255，255，255，0.8）），
颜色停止（100%，rgba（255，255，255，0.0））
);
背景：-o-线性梯度(
顶部
rgba（255，255，255，0.1）0%，
rgba（255，255，255，0.1）75%，
rgba（255，255，255，0.5）90%，
rgba（255，255，255，0.0）100%
);
背景：-ms线性梯度(
顶部
rgba（255，255，255，0.1）0%，
rgba（255，255，255，0.1）75%，
rgba（255，255，255，0.5）90%，6
rgba（255，255，255，0.0）100%
);
背景：线性梯度(
顶部
rgba（255，255，255，0.1）0%，
rgba（255，255，255，0.1）75%，
rgba（255，255，255，0.5）90%，
rgba（255，255，255，0.0）100%
);
-webkit变换：旋转（30度）；
-moz变换：旋转（30度）；
-ms变换：旋转（30度）；
-o变换：旋转（30度）；
变换：旋转（30度）；
-webkit转换属性：左、上、不透明度；
-moz过渡属性：左、上、不透明度；
-ms过渡属性：左、上、不透明度；
-o-过渡属性：左、上、不透明度；
过渡属性：左、上、不透明度；
-webkit转换持续时间：0.5s、0.5s、0.1s；
-moz转换持续时间：0.5s、0.5s、0.1s；
-ms转换持续时间：0.5s、0.5s、0.1s；
-o-过渡持续时间：0.5s、0.5s、0.1s；
过渡时间：0.5s、0.5s、0.1s；
-webkit过渡计时功能：轻松；
-moz过渡计时功能：轻松；
-ms转换定时功能：易用；
-o-转换-定时-功能：轻松；
过渡时间功能：轻松；
}
/*触发效应*/
.icon.triggered.icon效果{
不透明度：1；
前-30%；
左-30%；
}
/*活动状态*/
.图标：激活。图标效果{
不透明度：0；
}

您在#my和_button _div之间有一个空格。nice catch@dowomenfart一个类可以获得这种效果吗？在这些示例中，有icon effect类，然后是shine类。如果一个人的div里面有一个按钮，并且这个按钮有自己的样式，等等，那么有没有可能在按钮上切换一个类，从而产生发光效果呢？你能看一下我在上面发表的关于这个按钮的评论吗？我真的很感谢你的帮助