toggleClass with setInterval for current class (this)
toggleClass with setInterval for current class (this)
我有几个盒子有阴影。我希望阴影在悬停时脉动。下面的代码有效,但当我悬停其中任何一个时,显然会使 all 阴影脉动。我尝试在 setInterval 函数中使用 this
以便仅在单个盒子上应用脉冲效果——但这会破坏所有代码。我该怎么办?
$( ".pulse_label_shadow" ).hover(function() {
setInterval(function() {
$( '.pulse_label_shadow' ).toggleClass("pulse_label_shadow_hover");
}, 450);
}
);
或者更好 and/or 更简单,我如何在使用时添加 setInterval:
$( ".pulse_label_shadow" ).hover(function() {
$( this ).toggleClass("pulse_label_shadow_hover");
}, function() {
$( this ).removeClass( "pulse_label_shadow_hover" );
}
);
css 看起来像这样,如果这有什么不同的话:
.pulse_label_shadow{
-webkit-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
transition: all 0.8s ease;
}
.pulse_label_shadow_hover{
-webkit-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
-moz-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
}
和 HTML(对于其中一个框):
<div name="NameOfDiv">
<a class="p1 scale1_toggle scale1_toggle_hide taphover ios_auto_playback floating show_text_on_enter1" rel="nofollow" aria-haspopup="false">
<div class="indicator_up"><img src="images/indicators/up.png"/></div>
<div class="pulse_label pulse_label_shadow border_up">
<span class="ending_arrows">Title</span>
</div>
</a>
</div>
编辑:感谢您用不同的方法提供了很多很好的答案。一旦我对它们进行了更多测试,我会 select 给出答案。
您一次选择所有 .pulse_label_shadow
,而不是为每个绑定 hover
回调。试试用jQuery each
,请看我的fiddle:
编辑
抱歉,我误解了你的问题,我这里已经解决了,看看我的fiddle:
https://jsfiddle.net/ahdqnkdy/3/
使用clearInterval()
设置间隔并在删除时清除它。
var interval;
$(".pulse_label_shadow").hover(function(event) {
console.log('bsaang');
interval = setInterval(function() {
$(event.target).closest(".pulse_label_shadow").toggleClass("pulse_label_shadow_hover");
}, 450);
}, function(event) {
clearInterval(interval);
$(event.target).closest(".pulse_label_shadow").removeClass("pulse_label_shadow_hover");
});
.pulse_label_shadow{
-webkit-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
transition: all 0.8s ease;
}
.pulse_label_shadow_hover{
-webkit-box-shadow: 0px 0px 95px 1px rgba(255, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 95px 1px rgba(255, 0, 0, 0.5);
box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div name="NameOfDiv">
<a class="p1 scale1_toggle scale1_toggle_hide taphover ios_auto_playback floating show_text_on_enter1" rel="nofollow" aria-haspopup="false">
<div class="indicator_up">
<img src="http://i.imgur.com/ig9P2v1.png" />
</div>
<div class="pulse_label pulse_label_shadow border_up">
<span class="ending_arrows">Title</span>
</div>
</a>
</div>
$( ".pulse_label_shadow" ).hover(function() {
$( this ).addClass("pulse_label_shadow_hover");
}, function() {
$( this ).removeClass( "pulse_label_shadow_hover" );
}
);
所以这应该按照描述添加和删除 类,我认为你的问题是 'pulse',你需要 运行 transition 反复。为此,我们应该使用 animation 和 'animation-iteration-count:infinite'.
@keyframes pulse {
0% {
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5);
}
}
.pulse_label_shadow_hover{
animation: pulse 5s infinite;
}
没有 jQuery 悬停的示例 http://codepen.io/mrbizle/pen/QjEMeO
我有几个盒子有阴影。我希望阴影在悬停时脉动。下面的代码有效,但当我悬停其中任何一个时,显然会使 all 阴影脉动。我尝试在 setInterval 函数中使用 this
以便仅在单个盒子上应用脉冲效果——但这会破坏所有代码。我该怎么办?
$( ".pulse_label_shadow" ).hover(function() {
setInterval(function() {
$( '.pulse_label_shadow' ).toggleClass("pulse_label_shadow_hover");
}, 450);
}
);
或者更好 and/or 更简单,我如何在使用时添加 setInterval:
$( ".pulse_label_shadow" ).hover(function() {
$( this ).toggleClass("pulse_label_shadow_hover");
}, function() {
$( this ).removeClass( "pulse_label_shadow_hover" );
}
);
css 看起来像这样,如果这有什么不同的话:
.pulse_label_shadow{
-webkit-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
transition: all 0.8s ease;
}
.pulse_label_shadow_hover{
-webkit-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
-moz-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
}
和 HTML(对于其中一个框):
<div name="NameOfDiv">
<a class="p1 scale1_toggle scale1_toggle_hide taphover ios_auto_playback floating show_text_on_enter1" rel="nofollow" aria-haspopup="false">
<div class="indicator_up"><img src="images/indicators/up.png"/></div>
<div class="pulse_label pulse_label_shadow border_up">
<span class="ending_arrows">Title</span>
</div>
</a>
</div>
编辑:感谢您用不同的方法提供了很多很好的答案。一旦我对它们进行了更多测试,我会 select 给出答案。
您一次选择所有 .pulse_label_shadow
,而不是为每个绑定 hover
回调。试试用jQuery each
,请看我的fiddle:
编辑
抱歉,我误解了你的问题,我这里已经解决了,看看我的fiddle: https://jsfiddle.net/ahdqnkdy/3/
使用clearInterval()
设置间隔并在删除时清除它。
var interval;
$(".pulse_label_shadow").hover(function(event) {
console.log('bsaang');
interval = setInterval(function() {
$(event.target).closest(".pulse_label_shadow").toggleClass("pulse_label_shadow_hover");
}, 450);
}, function(event) {
clearInterval(interval);
$(event.target).closest(".pulse_label_shadow").removeClass("pulse_label_shadow_hover");
});
.pulse_label_shadow{
-webkit-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
transition: all 0.8s ease;
}
.pulse_label_shadow_hover{
-webkit-box-shadow: 0px 0px 95px 1px rgba(255, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 95px 1px rgba(255, 0, 0, 0.5);
box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div name="NameOfDiv">
<a class="p1 scale1_toggle scale1_toggle_hide taphover ios_auto_playback floating show_text_on_enter1" rel="nofollow" aria-haspopup="false">
<div class="indicator_up">
<img src="http://i.imgur.com/ig9P2v1.png" />
</div>
<div class="pulse_label pulse_label_shadow border_up">
<span class="ending_arrows">Title</span>
</div>
</a>
</div>
$( ".pulse_label_shadow" ).hover(function() {
$( this ).addClass("pulse_label_shadow_hover");
}, function() {
$( this ).removeClass( "pulse_label_shadow_hover" );
}
);
所以这应该按照描述添加和删除 类,我认为你的问题是 'pulse',你需要 运行 transition 反复。为此,我们应该使用 animation 和 'animation-iteration-count:infinite'.
@keyframes pulse {
0% {
box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
}
100% {
box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5);
}
}
.pulse_label_shadow_hover{
animation: pulse 5s infinite;
}
没有 jQuery 悬停的示例 http://codepen.io/mrbizle/pen/QjEMeO