Effetto pulsato con transizioni jQuery e CSS

Question

Sto cercando di ottenere un effetto in cui un colore di sfondo viene pulsato quando una condizione sono io. Così ho:

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

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

Così ora voglio usare jQuery per aggiungere e rimuovere quella classe un paio di volte per creare un effetto di background-color pulsante. Qualcosa di simile:

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

Questo, in teoria, dovrebbe creare l'effetto pulsante ma non lo fa. Quello che succede è che la classe 'attiva' viene aggiunta e non viene mai rimossa o aggiunta di nuovo. È quasi come se il primo 'removeClass' non venga mai attivato.

Mi manca qualcosa, ma non sono sicuro di cosa. Forse ha qualcosa a che fare con i tempi di transizione CSS, ma dovrebbero essere indipendenti l'uno dall'altro, giusto?

Grazie per qualsiasi idea.

Answer 1

Il ritardo funziona solo con le animazioni, senza aggiungere e rimuovere classi. Inoltre, puoi pulsare utilizzando i fotogrammi chiave in CSS:

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

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

Answer 2

Penso che questo è quello che ti serve, una funzione che si chiama ogni x secondi e altera una proprietà 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(); 

Answer 3

Cerca di ottenere questo effetto con le animazioni CSS3.

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

Applicare quindi i fotogrammi chiave al box elemento

.box{ 
    animation: pulsate 2s infinite; 
} 

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

Answer 4

La funzione delay viene effettivamente utilizzato solo per le animazioni. L'aggiunta e la rimozione di una classe non è un'animazione, ma puoi utilizzare il metodo queue o la funzione setTimeout per ottenere ciò che desideri.

Questa domanda ha un sacco di buone risposte su un altro thread che potrebbe rendere una lettura interessante per voi.

Answer 5

in fondo se si vuole che pulsare sempre si dovrebbe usare setInterval() ho creato un esempio per voi qui http://jsfiddle.net/UftRT/

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

se si vuole fermare solo impostare l'intervallo in una variabile quindi chiamare window.clearInterval (int), come questo int = window.setInterval(function() { pulssate(); },1000);