Как мерцать тень, используя jQuery?

Question

Я новичок, и я пытался выяснить, как мерцать тень на элементе, но не смог.

Пока я получил это .

Теоретически, это должно работать. Я использовал setInterval внутри для цикла, но он не работал. Кроме того, я думаю, что у меня есть некоторые проблемы с функцией переключения.

Суть в том, что когда страница начинает загружаться, я хочу, чтобы тень этого элемента начинала мерцать от очень быстрого до очень медленного, и в конце концов она остановилась бы.

У вас есть предложения?!

Answer 1

Я согласен с Правином Виджаяном. Вот витрина с ключевыми кадрами css3: http://jsfiddle.net/ufP7h/

@-webkit-keyframes twinkly {
    0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-moz-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}
@-ms-keyframes twinkly  {
     0%   { box-shadow: 0 0 10px #6c9; }
    100% { box-shadow: 0 0 10px red; }
}

#twinkle {
    -webkit-animation: twinkly 1s alternate infinite;
    -moz-animation: twinkly 1s alternate infinite;
    -ms-animation: twinkly 1s alternate infinite;
}

1005 *

Answer 2

Вы пытаетесь сделать что-то вроде этого - http://jsbin.com/eceziw/4

$(function() {
   var x = 0;  
   function twinkle() {   
   if(x){
      $('#twinkle').addClass('shadowAnim');
      x =0;
   }else{
      $('#twinkle').removeClass('shadowAnim');
      x=1;
   }                         
 }
  setInterval(twinkle, 1000);  
 });

Но лучше использовать анимацию по ключевым кадрам CSS3.