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

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

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

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

Answer 2

尝试使用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 3

基本上如果你想让它永远脉动，你应该使用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 4

delay函数实际上仅用于动画。添加和删除类不是动画，但您可以使用queue方法或setTimeout函数来实现您想要的效果。

这个问题对另一个thread有很多好的回复，可能会为你做一个有趣的阅读。

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();

使用jQuery和CSS转换的脉动效果

5 个答案: