JQueryを使ってランプにグロー効果を追加する

Question

私はクライアントのためにプロジェクトを終了するのに近づいています。

問題は、私はこれまでのところ、私が作ってみた

のjQuery

にスムーズにグ​​ロー効果を作る方法を知っておく必要がありそうでない場合、私はCSS3

でそれを行うだろう、+ IE6で動作するように持っている、ですjQueryのオンとオフの背景画像を切り替えてもらうと半分ソリューション、 - これはクリスマスライトか何かのために良いでしょうが、これは私がこのような何かについて

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

Answer 1

何を探していますグローではないでしょうか？

http://jsfiddle.net/RrZEw/

それとも、より良い、このようなあなたのニーズに合わせて、それを向上させることができます。

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

創造的です！最終的には非常に簡単 - - :)

Answer 2

はそれを考え出した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(); 
});