jQuery 애니메이션 및 이펙트

// 나타나고 사라지는 효과
$target.show();
$target.show(400, "easeOutBack", function(){});
$target.show(options);
$target.hide();
$target.hide("slow", "easeOutBack", function(){});
$target.hide(options);
$target.toggle()

// options 설정하기
$target.show({
  duration: 3000,
  easing: "easeOutBounce",
  complete: function() { alert("Done"); }
});

// 페이드 인/아웃 효과
$target.fadeIn()	// 서서히 나나탐
$target.fadeOut()	// 서서히 사라짐
$target.fadeTo()	// 불투명도를 조절
$target.fadeToggle()

// 슬라이드 업/다운 효과
$target.slideUp()	// 슬라이드되어 사라짐
$target.slideDown()	// 슬라이드되어 나타남
$target.slideToggle()

// 임의 효과
$target.delay() // 큐 내의 다음 아이템의 실행 지연
$target.stop() // 애니메이션 멈추기

// 사용자정의 애니메이션 효과
$target.stop().animate({
  opacity: 0
}, options)
// or
$target.stop().animate({
  opacity: 1,
  left: 500
}, 1000, "easeOutBack", function() {
  // 애니메이션이 종료될 때 호출될 함수
})

/* 사용예 */
// 목록의 각 아이템이 하나씩 나타나는 효과
$(function() {
  // 일단 숨긴 후, 바로 슬라이드 다운한다.
  $("h2").hide().slideDown();
  var $li = $("li");
  
  // 아이템이 하나씩 나타나게 하기 위해 each 메서드를 사용한다.
  $li.hide().each(function(index) {
    $(this).delay(700 * index).fadeIn(700); // index 순서대로 지연시키기
  });
  
  // 클릭하면 페이드 아웃
  $li.on("click", function() {
    $(this).fadeOut(700);
  });
});