Geek asks and answers

Pulse effect with jQuery and CSS transitions

I am trying to achieve an effect in which the background color pulsates when this condition me. Therefore, 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 this class a couple of times to create a ripple effect of the background color. Sort of:

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

This, in theory, should create a pulsating effect, but it is not. It happens that the "active" class is added and never deleted or never added again. It's almost like the first "removeClass" never fires.

Something is missing me, but I don’t know what. Maybe this has something to do with CSS transition time, but they should be independent of each other, right?

Thanks for any ideas.

+5
source share
5

, . , CSS:

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

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

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/

+4

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

+2

delay . , queue setTimeout .

, .

+1
source

I think this is what you need, a function that calls itself every x seconds and changes the css property to see a 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();
0
source

More articles:


All Articles