使用JQuery为灯添加发光效果

Question

我即将完成客户的一个项目，他们希望在他们的网站顶部悬挂发光灯。

问题是，它必须在 IE6+ 中工作，否则我会在 css3 中完成它

我需要知道如何在 Jquery 中平滑地实现发光效果

到目前为止，我已经想出了一半的解决方案，让 JQuery 切换背景图像打开和关闭 - 这对于圣诞灯或其他东西很有用，但这不是我正在寻找的光芒

    var glow2 = $('.lamp2');
    setInterval(function(){
    glow2.toggleClass('lampglow');
    }, 3000);

Answer 1

像这样的事情怎么办？

http://jsfiddle.net/RrZEw/

或者您甚至可以增强它以更好地满足您的需求，如下所示：

http://jsfiddle.net/RrZEw/1/

发挥创意！ :)

Answer 2

想通了 - 最后非常简单 - 两张背景图像在 css 中重叠，然后用不透明度取出一张

     <div class="lamp1"></div>
     <div class="lamp1 lampglow1"></div>
     <div class="lamp2"></div>
     <div class="lamp2 lampglow2"></div>
     <div class="lamp3"></div>
     <div class="lamp3 lampglow3"></div>

    .lamp1{position:fixed; top:-100px; left:8%; background:url(/assets/img/lamp.png)     no-repeat; width:200px; height:600px;}
    .lamp2{position:fixed; top:-220px; left:5%; background:url(/assets/img/lamp.png) no-repeat; width:200px; height:600px;}
    .lamp3{position:fixed; top:-110px; right:5%; background:url(/assets/img/lamp.png) no-repeat; width:200px; height:600px;}

    .lampglow1{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}
    .lampglow2{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}
    .lampglow3{background:url(/assets/img/lampglow.png) no-repeat; width:200px; height:600px;}


   $(document).ready(function() {
    function pulsate() {
      $(".lampglow1").animate({opacity: 0.2}, 3000, 'linear')
                .animate({opacity: 1}, 3000, 'linear', pulsate);
       $(".lampglow2").animate({opacity: 0.2}, 5000, 'linear')
                .animate({opacity: 1}, 5000, 'linear', pulsate);
       $(".lampglow3").animate({opacity: 0.2}, 4000, 'linear')
                 .animate({opacity: 1}, 4000, 'linear', pulsate);
    }

    pulsate();
 });