jQuery/Javascript로 빛나는 이미지

Question

두 이미지가 있습니다. 하나는 정상적인 것이고 다른 하나는 더 착색 된 것입니다. 이 이미지를 다른 이미지 위에 표시하고 매초마다 투명과 불투명간에 전환하는 "빛나는"효과를 원합니다. 또한 사용자가 특정 버튼을 누르면이 효과를 멈출 필요가 있습니다. jQuery 또는 Javascript를 사용하면 어떻게 될까요?

Answer 1

jsBin demo

html :

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

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

jquery :

.images img{ 
    position:absolute; 
    } 

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

:

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; 
}); 

그냥 절대 두 이미지 위치

css3 상자 그림자를 사용했지만 빛나는 .png 이미지를 대신 사용할 수 있습니다.