Pulsate effect with jQuery and CSS transitions

Question

I'm trying to achieve an effect in which a background color is pulsated when a condition is me. So I have:

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

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

So now I want to use jQuery to add and remove that class a couple times to create a background-color pulsating effect. Something like:

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

This, in theory, should create the pulsating effect but it doesn't. What happens is that the 'active' class is added and is never removed or added again. It's almost like the first 'removeClass' is never triggered.

I'm missing something, but not sure what. Maybe it has something to do with CSS transition timing, but they should be independent of each other, right?

Thanks for any ideas.

Solution 1

Delay only works with animations, not adding and removing classes. Also, you can pulsate using keyframes in CSS:

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

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

Solution 2

Try to achieve this effect with CSS3 Animations.

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

Then apply the keyframes to the box element

.box{
  animation: pulsate 2s infinite;
}

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

Solution 3

basically if you want it to pulsate forever you should use setInterval() i set up an example for you here http://jsfiddle.net/UftRT/

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

if you want it to stop just set the interval in a variable then call window.clearInterval(int), like this int = window.setInterval(function() { pulssate(); },1000);

Solution 4

The delay function is actually only used for animations. Adding and removing a class is not an animation, but you can use the queue method or setTimeout function to achieve what you want.

This question has a lot of good replies on another thread that might make an interesting read for you.

View more solutions

Comments

[dmathisen]

>Delay only works with animations I did not know that - thanks!

[moettinger]

Technically, you could go without the 0% and 100% states since they default to the original state of the element.

[Sikshya Maharjan]

Agreed, using the animation-iteration-count property is by far the easiest solution in this instance; incidentally here's a demo I was putting together for my own (now unnecessary) answer.

[Sikshya Maharjan]

Also, @dmathison, you specified (to paraphrase) 'pulse a couple of times' this answer pulses infinitely.

[RandomUs1r]

Also take a look docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations for more sample code.

[dmathisen]

@DavidThomas, right. It looks like I can modify to animation: pulsate 2s 2;