6

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

<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 过渡时间有关，但它们应该相互独立，对吧？

感谢您的任何想法。

4

5 回答 5

16

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

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

.box {
  animation: pulse .5s ease-out 2;
}
于 2013-02-11T16:25:05.640 回答
4

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

于 2013-02-11T16:25:40.257 回答
2

基本上，如果您希望它永远脉动，您应该使用 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);

于 2013-02-11T16:33:41.413 回答
1

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

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

于 2013-02-11T16:25:45.450 回答
0

我认为这就是您需要的，一个每隔 x 秒调用一次并更改 css 属性的函数，请参见 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();
于 2013-02-11T16:24:56.290 回答