[jquery] 에니메이션 효과 animate/hide/show/fade/slide/delay | setInterval

[ jquery 에니메이션 효과 ] 

hide / show / fadeIn / fadeOut / slideDown / slideUp

delay / animate

 

 $("태그").효과( 1/1000sec ); 

: 태그에 밀리초 동안 효과주기  

 

$("h1:eq(0)").hide();

: 해당태그를 숨긴다 

$("h1:eq(0)").show();

: 해당태그를 나타나게한다. 

 

=> 조건 걸고, 어떨 땐 나타나고, 어떨 땐 숨기는 식으로 동적으로 사용 할 수 있다. 

-  시간은 주지 않고 사용 

 

$("h1:eq(1)").fadeOut(3000);

: 3초에 걸쳐서 사라짐 

 

$("h1:eq(1)").fadeIn(3000);

: 3초에 걸쳐서 나타남

 

$("h1:eq(2)").slideUp(3000);

: 3초에 걸쳐서 윗 라인으로 올라감 

$("h1:eq(2)").slideDown(3000);

: 3초에 걸쳐서 아랫라인으로 내려감 

$("h1:eq(3)").delay(2000);

: 2초 동안 딜레이 

 

 

[ animate ( );  직접 에니메이션 효과 만들기 ] 

 

$( ).animate( CSS등 사용자정의 효과, 1/1000초 );

: 태그에 사용자정의 효과를  몇초에 걸쳐 나타내겠다. 

$("h1:eq(3)").animate(

{
     width : "1000px",
     backgroundColor : "blue"

} 

, 5000
      );

 

=> 태그에 CSS 속성효과 1000너비, 배경색 blue로 SET 하는 효과를 5초에 걸쳐 주겠다. 

( 색깔은 jquery-ui 라이브러리 필요 ) 

 

[  setInterval 이벤트로 에니메이션 효과 만들기 ]

let count = 0;
let timer;
$("#start").on("click", function(){
if (timer != undefined ){ clearInterval(timer);}
    timer = setInterval(function(){
$("img").attr("src",
"../animationimages/" + img_ar[count % img_ar.length]);
count++;
}, 50);
$("img").css("width","200px");
$("img").css("height","200px");
//$("img").css("float","right");
});

 

-setInterval 로 밀리초 마다 

img 태그를 찾아 attr를 이용해 src 속성에 새로운 사진 URL 을 준다.  

- 새로운 사진을 주는건 변수에 사진 파일명을 담은 배열을 담아두고, 

- count++ 변수를 setInterval에 걸어두면 함수 실행될때마다 

++ 된 값을 사진 index 번호로 붙여서 가져올 수 있다. 

- % 를 이용해서 인덱스 번호 반복 사용 가능 

- 사진배열 index 를 이용하는건 이렇게 차례대로 가져와서 사용할 수 도 있고, 

math.random 난수로 랜덤한 사진을 가져올 수 도 있고, 

따로 조건을 걸어 사용하는 등, 다양한 방법으로 애니메이션 효과를 만들 수 있다.