Добавление эффекта свечения к лампе с помощью JQuery - PullRequest
Новая
       48

Добавление эффекта свечения к лампе с помощью JQuery

0 голосов
/ 17 февраля 2012

Я близок к завершению проекта для клиента, они хотят светящиеся лампы, свисающие с верхней части их сайта.

Проблема в том, что он должен работать в IE6 +, иначе я бы сделал это в css3

Мне нужно знать, как плавно сделать эффект свечения в Jquery

Пока что я придумала половину решения: заставить JQuery включать и выключать фоновое изображение - это было бы хорошо для рождественских огней или чего-то такого, но это не то свечение, которое я ищу 

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

Ответы [ 2 ]

1 голос
/ 17 февраля 2012

Как насчет этого?

http://jsfiddle.net/RrZEw/

Или вы можете даже улучшить его, чтобы лучше соответствовать вашим потребностям, например:

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

Будь креативным! :)

0 голосов
/ 20 февраля 2012

Понял - довольно просто, в конце - два фоновых изображения перекрываются в 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();
 });
...