Efekt pulsacji z przejściami jQuery i CSS

Question

Próbuję uzyskać efekt, w którym kolor tła jest pulsowany, gdy stan jest mną. Tak mam:

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

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

więc teraz chcę użyć jQuery do dodawania i usuwania tej klasy kilka razy, aby stworzyć efekt background-color pulsujące. Coś takiego:

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

To, teoretycznie, powinno stworzyć efekt pulsowania, ale tak nie jest. Co się dzieje, jest to, że klasa "aktywna" jest dodawana i nigdy nie jest usuwana ani dodawana ponownie. To prawie tak, jakby pierwszy "removeClass" nigdy nie został uruchomiony.

Brakuje mi czegoś, ale nie wiem co. Może ma to coś wspólnego z czasem przejścia CSS, ale powinny one być od siebie niezależne, prawda?

Dzięki za wszelkie pomysły.

Answer 1

Opóźnienie działa tylko z animacjami, nie dodając ani nie usuwając klas. Ponadto możesz pulsować przy użyciu klatek kluczowych w CSS:

Answer 2

Myślę, że to jest to, czego potrzebujesz, funkcja, która wywołuje się co x sekund i zmienia właściwość 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

Spróbuj uzyskać ten efekt za pomocą animacji CSS3.

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

następnie zastosować klatek kluczowych do elementu

.box{ 
    animation: pulsate 2s infinite; 
} 

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

Answer 4

Funkcja delay jest rzeczywiście używany tylko do animacji box. Dodawanie i usuwanie klasy nie jest animacją, ale możesz użyć metody queue lub funkcji setTimeout, aby osiągnąć to, co chcesz.

To pytanie ma wiele dobrych odpowiedzi na inne thread, które mogą być interesujące dla Ciebie.

Answer 5

zasadzie jeśli chcesz pulsować zawsze należy użyć setInterval() i skonfigurować dla was przykładem tutaj http://jsfiddle.net/UftRT/

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

jeśli chcesz go zatrzymać tylko ustawić interwał w zmiennej następnie zadzwonić window.clearInterval (int), podobny do tego int = window.setInterval(function() { pulssate(); },1000);