javascript - jQuery/Javascript を使用した光る画像

Question

私は2つの画像を持っています。1 つは正常で、もう 1 つはより着色されています。この画像を他の画像の上に表示し、1秒ごとに透明と不透明が切り替わる「光る」効果を持たせたいと考えています。ユーザーが特定のボタンを押したときに、この効果を停止する必要もあります。jQueryまたはJavascriptでこれを行うにはどうすればよいですか?

Answer 1

jsBin デモ

html :

<button id="stop">STOP IT!</button>

<div class="images">
     <img src="img1.jpg" />
     <img src="img2.jpg" class="glowed"/>
</div>

jquery :

var playing = true;

function loop(){
  if(playing){
    $('.images img:eq(1)').fadeIn(700, function(){
      $(this).fadeOut(700,loop);
    });
  }
}

loop(); // start loop


$('#stop').click(function(){
  playing=0;
}); 

2 つの画像を絶対位置に配置するだけです。

  .images img{
    position:absolute;
  }

  .glowed{
    box-shadow: 0px 0px 30px 2px #cf5
  }

css3 のボックス シャドウを使用しましたが、代わりに光る.png 画像を使用できます。