jQuery和CSS转换脉冲效应

我试图实现一种效果，当条件是我时，背景色会发生脉动。所以，我有：jQuery和CSS转换脉冲效应

<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转换时机有关，但它们应该是彼此独立的，对吗？

感谢您的任何想法。

来源

2013-02-11 dmathisen

你见过这个[http://docs.jquery.com/UI/Effects/Pulsate](http://docs.jquery.com/UI/Effects/搏动）？ – Morpheus 2013-02-11 16:24:52

是的，但据我所知，这只是为了不透明。我也想在不使用jQueryUI的情况下完成此操作。 – dmathisen 2013-02-11 16:50:44

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

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

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

来源

2013-02-11 16:25:05 moettinger

>延迟仅适用于动画我不知道 - 谢谢！ – dmathisen 2013-02-11 16:26:54

同意，使用'animation-iteration-count'属性是迄今为止最简单的解决方案;顺便说一句[这是我正在放的一个演示]（http://jsfiddle.net/davidThomas/NZdVK/2/）为我自己（现在不必要）的答案。 – 2013-02-11 16:29:33

另请参阅http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations以获取更多示例代码。 – RandomUs1r 2013-02-11 16:49:50

我想这就是你需要的一个函数，它每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();

来源

2013-02-11 16:24:56 Trufa

坏主意，现在我们让CSS做所有的努力工作 – 2015-07-08 23:54:30

尝试使用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-11 16:25:40

从技术上讲，你可以没有0％和100％状态，因为它们默认为元素的原始状态。 – moettinger 2013-02-11 16:29:08

另外，@dmathison，你指定（复述）'脉冲几次'这个答案脉冲*无限*。 – 2013-02-11 16:30:32

@DavidThomas，对。它看起来像我可以修改为_动画：pulsate 2s 2; _ – dmathisen 2013-02-11 16:52:06

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

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

来源

2013-02-11 16:25:45 Deif

基本上，如果你想让它跳动永远应该使用的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-11 16:33:41 mircea

jQuery和CSS转换脉冲效应

回答

相关问题