使用 JQuery 为灯添加发光效果答案

【问题标题】：Adding glow effect to lamp with JQuery使用 JQuery 为灯添加发光效果
【发布时间】：2024-01-23 17:37:01
【问题描述】：

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

问题是，它必须在 IE6+ 中运行，否则我会在 css3 中运行

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

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

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

【问题讨论】：

你的意思是你想让背景平滑淡入/淡出吗？你的问题不是很清楚。
你不能用jQuery animate来为“glow-effect-image”的不透明度设置动画吗？
是的，我希望背景能够平滑地淡入淡出 - 抱歉，不清楚我正在快速加载 atm 大声笑 - 认为我已经完成了一半...... $（文档）。准备好（函数（）{函数发光（）{$（“.lamp1”）.animate（{不透明度：0.2}，1200，'线性'）.animate（{不透明度：1}，1200，'线性'，发光） ; } 辉光(); });
想通了 - 最后很简单 - 两个背景图像在 css 中重叠，然后用不透明度取出一个 - 感谢 Mathieu 的想法 - 当它让我进入时会上传完整的答案8 小时

标签： jquery effect glow

【解决方案1】：

这样的事情呢？

http://jsfiddle.net/RrZEw/

或者您甚至可以像这样增强它以更好地满足您的需求：

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

要有创意！ :)

【讨论】：

【解决方案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();
 });

【讨论】：