어떻게 자동으로 실행되도록 페이드 아웃 된 페이드 아웃 타이머를 추가합니까?

이것은 내 코드입니다.어떻게 자동으로 실행되도록 페이드 아웃 된 페이드 아웃 타이머를 추가합니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Fading JavaScript Example</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript"> 

var fadeEffect=function(){ 
return{ 
    init:function(id, flag, target){ 
     this.elem = document.getElementById(id); 
     clearInterval(this.elem.si); 
     this.target = target ? target : flag ? 100 : 0; 
     this.flag = flag || -1; 
     this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0; 
     this.si = setInterval(function(){fadeEffect.tween()}, 30); 
    }, 
    tween:function(){ 
     if(this.alpha == this.target){ 
      clearInterval(this.si); 
     }else{ 
      var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag); 
      this.elem.style.opacity = value/100; 
      this.elem.style.filter = 'alpha(opacity=' + value + ')'; 
      this.alpha = value 

     } 
    } 
} 
}(); 

var fadeEffect2=function(){ 
return{ 
    init:function(id, flag, target){ 
     this.elem = document.getElementById(id); 
     clearInterval(this.elem.si); 
     this.target = target ? target : flag ? 100 : 0; 
     this.flag = flag || -1; 
     this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0; 
     this.si = setInterval(function(){fadeEffect2.tween()}, 30); 
    }, 
    tween:function(){ 
     if(this.alpha == this.target){ 
      clearInterval(this.si); 
     }else{ 
      var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag); 
      this.elem.style.opacity = value/100; 
      this.elem.style.filter = 'alpha(opacity=' + value + ')'; 
      this.alpha = value 

     } 
    } 
} 
}(); 
var fadeEffect3=function(){ 
return{ 
    init:function(id, flag, target){ 
     this.elem = document.getElementById(id); 
     clearInterval(this.elem.si); 
     this.target = target ? target : flag ? 100 : 0; 
     this.flag = flag || -1; 
     this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0; 
     this.si = setInterval(function(){fadeEffect3.tween()}, 30); 
    }, 
    tween:function(){ 
     if(this.alpha == this.target){ 
      clearInterval(this.si); 
     }else{ 
      var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag); 
      this.elem.style.opacity = value/100; 
      this.elem.style.filter = 'alpha(opacity=' + value + ')'; 
      this.alpha = value 

     } 
    } 
} 
}(); 


</script> 

</head> 
<body> 

<div id="wrapper"> 
<div id="fade"></div> 

<div id="fade1"></div> 

<div id="fade2"> 
<div class="link"> <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a></div> 

</div> 

</div> 

<div class="button" onclick="fadeEffect.init('fade', 1);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',0);myFunction()">pic 1</div> 
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',1);fadeEffect3.init('fade2',0)">pic 2</div> 
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',1)">pic 3</div> 

</body> 
</html>

저는 (는) 자바 스크립트를 사용하고 있습니다. 단추를 사용하여 이미지가 희미해질 수는 있지만 손댈 때 타이머를 사용하여 자동으로 페이드 인/페이드 아웃하고 싶습니다. 또는이 작업을 더 쉽게 수행 할 수 있다면 감사하게 생각합니다.

출처

2012-10-04 Jun Jin

예. setTimeout 함수를 사용해야합니다. 사용은 이미 사용 된 setInterval 함수와 매우 유사합니다. 차이점은 Interval이 매 X 초마다 수행한다는 것입니다. 단 한 번의 호출 만합니다 (이 설명과 함께 "미안"한 경우 미안).

setTimeout(function() { 
    //here you fade out whatever you want 
}, 3000); //the 3000 means milliseconds, so 3 seconds.

출처

2012-10-04 04:56:04 Mamsaac

어떻게 자동으로 실행되도록 페이드 아웃 된 페이드 아웃 타이머를 추가합니까?

답변

관련 문제