带有 jQ​​uery 和 CSS 过渡的脉动效果

Question

我正在尝试实现一种效果，当条件是我时，背景颜色会脉动。所以我有：

<div class="box">...</div>

.box {
    background-color: #fff;
    transition: background-color 0.5s ease-out;
}
.box.active {
    background-color: #ccc;
}

所以现在我想使用 jQuery 来添加和删除该类几次，以创建背景颜色的脉动效果。比如：

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

理论上，这应该会产生脉动效果，但事实并非如此。发生的情况是添加了“活动”类，并且永远不会删除或再次添加。这几乎就像第一个“removeClass”从未被触发。

我遗漏了一些东西，但不确定是什么。可能和 CSS 过渡时间有关，但它们应该是相互独立的，对吧？

感谢您的任何想法。

Answer 1

基本上，如果您希望它永远脉动，您应该使用 setInterval() 我在这里为你设置了一个例子http://jsfiddle.net/UftRT/

function pulssate() {
if ( $('.box').hasClass('active') ) {
    $('.box').removeClass('active')
} else {
    $('.box').addClass('active')
}
}
window.setInterval(function() { pulssate(); },1000);

如果你想让它停止，只需在变量中设置间隔，然后调用 window.clearInterval(int)，就像这样 int = window.setInterval(function() { pulssate(); },1000);

Answer 2

delay 函数实际上只用于动画。添加和删​​除一个类不是动画，但是你可以使用queue方法或setTimeout函数来实现你想要的。

这个问题对另一个 thread 有很多很好的回复，可能会让你读起来很有趣。

Answer 3

尝试使用 CSS3 动画来实现此效果。

@-webkit-keyframes pulsate
{
      0%   {background-color: #fff;}
      50%  {background: #ccc;}
      100% {background: #fff;}
}

然后将关键帧应用到box 元素

.box{
  animation: pulsate 2s infinite;
}

http://jsfiddle.net/taltmann/jaQmz/

Answer 4

延迟仅适用于动画，不适用于添加和删除类。此外，您可以使用 CSS 中的关键帧来跳动：

@keyframes pulse { 
  50% { background-color: #ccc }
}

.box {
  animation: pulse .5s ease-out 2;
}

Answer 5

我认为这就是你需要的，一个每隔 x 秒调用一次并改变一个 css 属性的函数，see live demo。

var state = true;
function changeColor() {
    state = !state;
    if(state){
        $("div").css("background","red");
    }else{
        $("div").css("background","blue");
    }
    setTimeout(function () {
        changeColor();
    }, 1000);
}

changeColor();