(jQuery) 제이쿼리 애니메이션

강좌8 - jQuery - 8년 전 등록

제이쿼리 애니메이션

안녕하세요. 이번 시간에는 제이쿼리 애니메이션에 대해 알아보겠습니다. 제이쿼리는 또 애니메이션이 편리하기로 유명하죠. 그래서 많은 웹 디자이너분들이 제이쿼리를 찾나봅니다. 일단 간단하게 선택자를 숨기고 보여주는 것부터 시작하죠.

hide, show, toggle

태그를 숨겼다 보였다 하는 메소드입니다. show하면 보여지고, hide하면 사라집니다. 첫 번째 인자로 숫자를 넣어 보여지고 숨겨지는 시간을 설정할 수 있습니다. 단위는 ms입니다. 또는 slow(600ms), normal(400ms), fast(200ms) 문자열을 넣어 속도를 조절할 수도 있습니다. 그리고 함수를 인자로 넣으면 애니메이션이 끝났을 때 동작합니다.

toggle은 보이는 상태에서는 사라지게 하고, 사라진 상태에서는 보이게 합니다. 즉 두 가지 상태를 전환합니다. 스위치 같은 메소드입니다.

$('#zero').show();
$('#zero').hide();
$('#zero').show(1000); // 1000ms -> 1초
$('#zero').hide('slow');
$('#zero').toggle(1000, function() {
  alert('짜잔!'); // 1초동안 나타나거나 사라진 다음 '짜잔!'하고 alert
});

slideUp, slideDown, slideToggle

slideUp은 슬라이드쇼가 올라가는 효과를 보이며 태그가 사라집니다. slideDown은 슬라이드쇼가 내려가듯 태그가 나타납니다. slideToggle은 두 상태를 전환합니다. 기본 속도는 400ms입니다. 마찬가지로 끝나고 일어날 동작을 정의할 수 있습니다.

$('#zero').slideUp();
$('#zero').slideDown('fast');
$('#zero').slideToggle(500, function() {
  alert('스르륵');
});

fadeIn, fadeOut, fadeToggle, fadeTo

fadeIn은 서서히 태그가 나타납니다. fadeOut은 서서히 태그가 사라집니다. fadeToggle은 두 상태를 전환합니다. fadeTo 메소드도 있습니다. 이 메소드는 특정 불투명도(opacity)로 태그의 불투명도를 조정합니다.

$('#zero').fadeOut();
$('#zero').fadeIn('normal');
$('#zero').fadeToggle(800, function() {
  alert('사사삭');
});
$('#zero').fadeTo(500, 0.5); // opacity를 0.5로 서서히 바꿉니다.

delay, stop

애니메이션 실행을 조금 늦추거나(delay), 중간에 멈출 수 있습니다(stop);

$('#zero').delay(500).hide(); // 500ms 기다렸다가 hide
$('#zero').show().stop(); // show를 멈춤

animate

애니메이션의 끝판왕입니다. 애니메이션을 원하는 대로 정의할 수 있습니다. 사실 위의 fadeIn, slideUp 등도 다 내부적으로 animate를 사용합니다. 인자로 객체를 제공합니다. left 속성은 '+=100'으로 되어있고, height는 100으로 고정되어 있습니다.

left는 현재 left 값에서 100을 더한 값으로 움직이고, height는 100으로 움직입니다. 두 번째 인자로는 애니메이션이 실행될 시간을 ms로 전달하고, 세 번째 인자로는 애니메이션이 완료된 후의 행동을 함수로 전달할 수 있습니다.

$('#zero').animate({
  left: '+=100',
  height: 100
}, 500, function() {
  console.log('애니메이션 완료!');
});

queue, dequeue

큐는 실행될 애니메이션 개수에 대한 정보를 갖고 있고, 애니메이션이 끝났을 때의 콜백을 전달할 수 있습니다. 아래의 예는 위와 같습니다. dequeue는 queue가 끝났다는 것을 제이쿼리에게 알려줄 수 있습니다.

$('#zero').animate({
  left: '+=100',
  height: 100
}, 500)
  .queue(function() {
    console.log('애니메이션 완료!');
    $('#zero').dequeue();
  });

queue에 한 단계를 더 추가해봅시다. 여러 단계가 동시에 있는 경우에는 dequeue 대신 queue 메소드 안에 있는 next 매개변수를 사용할 수 있습니다.

$('#zero').animate({
   left: '+=100',
   height: 100
}, 500)
  .queue(function(next) {
    console.log('애니메이션 완료!');
    next();
  })
  .queue(function(next) {
    console.log('콘솔 로깅 완료!');
    next();
  });

그리고 큐는 애니메이션의 개수에 대한 정보를 갖고 있습니다. queue 안에 fx(또는 queue의 이름)를 넣고 length 속성을 조회하면 몇 개의 애니메이션이 대기중인지 나옵니다.

$('#zero').queue('fx').length

다음 시간에는 제이쿼리 AJAX에 대해서 알아보겠습니다!

조회수:

ZeroCho Blog

게시글