화면이 로드되었을때 delay 후 스크립트 적용

 

화면이 로드되었을때 무언가 fade in 된다던지, 효과를 넣을때 간단하게 쓸수있는 함수.

 

$('#section_01').delay(200).queue(function(){ $(this).addClass('active1'); });

 

이런식으로 선택자에게 delay함수를 써주고, addClass를 해주면 된다.

 

이때, 미리 css 에서 section_01이 active1 클래스를 가졌을 때 특정 부분의 opacity가 1이 되도록 하고,  section1에는 transition: all 1s ease 0.5s 등으로 애니메이션 효과를 준다.

 

예시)

 

 

html 

 

<section id="section1">
    <div class="content">나타나는 부분</div>
</section>

 

 

css

 

 #section1 .content{opacity: 0; transition: all 0.3s;}
#section1.active .content{opacity:1;}

 

 

js

 

  $('#section1').delay(200).queue(function(){ $(this).addClass('active'); });