Question

我有几个有阴影的盒子。我希望阴影在悬停时发出脉冲。下面的代码可以工作，但是当我将其中任何一个悬停时，显然会使所有阴影产生脉动。我曾尝试在setInterval函数中使用this，以便仅在单个框中应用脉冲效果 - 但这会将代码全部破坏。我该怎么办？

$( ".pulse_label_shadow" ).hover(function() {
    setInterval(function() {
       $( '.pulse_label_shadow' ).toggleClass("pulse_label_shadow_hover");
    }, 450);
  }
);

或者更好和/或更简单，如何在使用时添加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>

编辑：感谢您提供了许多不同方法的优秀答案。一旦我对它们进行了多次测试，我就会选择一个答案。

Answer 1

$( ".pulse_label_shadow" ).hover(function() {
    $( this ).addClass("pulse_label_shadow_hover");
}, function() {
    $( this ).removeClass( "pulse_label_shadow_hover" );
   }
);

所以这应该按照描述添加和删除类，我认为你的问题是'脉冲'，你需要重复运行过渡。为此，我们应该使用动画和'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

的示例

Answer 2

您一次选择所有+-------------+------+------------+----------+-----------+-----------+ | source_name | week | sum(picks) | sum(won) | sum(lost) | sum(draw) | +-------------+------+------------+----------+-----------+-----------+ | A | 10 | 2 | 1 | 1 | 0 | +-------------+------+------------+----------+-----------+-----------+ | A | 11 | 5 | 3 | 2 | 0 | +-------------+------+------------+----------+-----------+-----------+ | B | 10 | 2 | 1 | 1 | 0 | +-------------+------+------------+----------+-----------+-----------+ | B | 11 | 2 | 1 | 1 | 0 | +-------------+------+------------+----------+-----------+-----------+ | C | 11 | 2 | 2 | 0 | 0 | +-------------+------+------------+----------+-----------+-----------+，而不是为每个.pulse_label_shadow绑定hover回调。尝试使用jQuery each，请查看我的小提琴：

修改

抱歉，我误解了你的问题，我已经在这里解决了，看看我的小提琴： https://jsfiddle.net/ahdqnkdy/3/

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

toggleClass with setInterval for current class（this）

3 个答案:

修改