Пульсационный эффект с переходами jQuery и CSS

Question

Я пытаюсь добиться эффекта, при котором цвет фона пульсирует, когда меня это условие. Поэтому у меня есть:

<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, но они должны быть независимы друг от друга, не так ли?

Спасибо за любые идеи.

Answer 1

Задержка работает только с анимацией, а не с добавлением и удалением классов. Кроме того, вы можете пульсировать с использованием ключевых кадров в CSS:

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

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

Answer 2

Я думаю, что это то, что вам нужно, функция, которая называет себя каждые 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(); 

Answer 3

Попробуйте добиться этого эффекта с помощью анимации 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/

Answer 4

delay функция фактически используется только для анимации. Добавление и удаление класса не является анимацией, но вы можете использовать метод queue или setTimeout для достижения того, что вы хотите.

Этот вопрос имеет много хороших ответов на другой thread, который может сделать интересным для вас чтение.

Answer 5

в основном, если вы хотите, чтобы пульсировать навсегда, вы должны использовать 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);