Question

我是一个新手，我试图找出如何在一个元素上闪烁盒子阴影，但我不能。

到目前为止，我得到this。

理论上，它应该起作用。我在里面使用setInterval进行循环，但它没有用。另外，我认为我在切换功能方面遇到了一些问题。

主要的一点是，当页面开始加载时，我希望该元素的盒子阴影开始从非常快到非常缓慢闪烁，最终会停止。

你有什么建议吗？！

Answer 1

我同意Praveen Vijayan的看法。这是一个包含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;
}

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关键帧动画。

如何使用jQuery闪烁阴影？

2 个答案: