[jQuery] 효과와 애니메이션

jQuery의 다양한 Effect

hide() 와 show()

hide() 와  show() 메소드를 사용하면 HTML 요소를 숨기거나 표시할 수 있다.

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

문법

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

• speed 매개변수는 hide/show 속도를 지정하며 “slow”, "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 또는 메소드가 완료된 후 실행되는 함수다.

속도 매개변수를 사용하여 hide()사용하기:

$("button").click(function(){
  $("p").hide(1000);
});

---

Toggle()

toggle()메소드 를 사용하여 요소 숨기기와 표시 사이를 전환할 수 있다.

표시된 요소는 숨겨지고 숨겨진 요소는 표시된다.

$("button").click(function(){
  $("p").toggle();
});

문법

$(selector).toggle(speed,callback);

• speed 매개변수는 “slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 또는 메소드가 완료된 후 실행되는 함수다.

---

fadeIn()

fadeIn()메소드는 숨겨진 요소를 페이드 인하는 데 사용된다.

문법

$(selector).fadeIn(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 페이딩이 완료된 후 실행할 함수다.

fadeIn()매개변수를 다르게 사용하기:

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

---

fadeOut()

fadeOut()메소드는 숨겨진 요소를 페이드 아웃하는 데 사용된다.

문법

$(selector).fadeOut(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 페이딩이 완료된 후 실행할 함수다.

fadeOut()매개변수를 다르게 사용하기:

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

---

fadeToggle()

fadeToggle()메소드는 fadeIn()fadeOut()메소드 간의 전환을 할 수 있다.

fadeToggle()요소가 페이드 아웃되면 페이드 인 한다.

fadeToggle()요소가 페이드 인되면 페이드 아웃 된다.

문법

$(selector).fadeOut(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 페이딩이 완료된 후 실행할 함수다.

fadeToggle()매개변수를 다르게 사용하기:

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

---

fadeTo()

fadeTo()메소드를 사용하면 지정된 불투명도(0과 1 사이의 값)로 페이딩할 수 있다.

문법

$(selector).fadeTo(speed,opacity,callback);

• speed 매개변수는 효과의 지속 시간을 지정한다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• opacity 는 필수 매개변수다. 지정된 불투명도(0과 1 사이의 값)로 페이딩을 지정한다.
• callback 매개변수는 함수가 완료된 후 실행할 함수다.

fadeTo()매개변수를 다르게 사용하기:

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

---

slideDown()

slideDown()메소드는 요소를 아래로 슬라이드하는 데 사용된다.

문법

$(selector).slideDown(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 슬라이딩 완료 후 실행할 함수다.

slideDown() 사용하기:

$("#flip").click(function(){
  $("#panel").slideDown();
});

---

slideUp()

slideUp()메소드는 요소를 아래로 슬라이드하는 데 사용된다.

문법

$(selector).slideUp(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 슬라이딩 완료 후 실행할 함수다.

slideUp() 사용하기:

$("#flip").click(function(){
  $("#panel").slideUp();
});

---

slideToggle()

slideToggle()메소드는 slideDown() slideUp()메소드 간의 전환을 할 수 있다.

slideToggle()요소가 아래로 슬라이드된 경우 위로 슬라이드한다.

slideToggle()요소가 위로 슬라이드된 경우 아래로 슬라이드한다.

문법

$(selector).slideToggle(speed,callback);

• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 슬라이딩 완료 후 실행할 함수다.

slideToggle() 사용하기:

$("#flip").click(function(){
  $("#panel").slideToggle();
});

---

animate()

animate()메소드는 사용자 지정 애니메이션을 만드는 데 사용된다.

문법

$(selector).animate({params},speed,callback);

• 필수 매개변수 params는 애니메이션할 CSS 속성을 정의한다.
• speed 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.
• callback 매개변수는 애니메이션이 완료된 후 실행할 함수다.

animate() 사용하기: 250px의 왼쪽 속성에 도달할 때까지 <div> 요소를 오른쪽으로 이동한다.

$("button").click(function(){
  $("div").animate({left: '250px'});
});

기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없다.

위치를 조작하려면 먼저 요소의 CSS 위치 속성을 상대적, 고정 또는 절대값으로 설정해야 한다.

여러 속성 조작

여러 속성을 동시에 애니메이션할 수 있다.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

animate() 메서드로 모든 CSS 속성을 조작할 수 있는지?

가능하다. 그러나 모든 속성 이름은 animate() 메서드와 함께 사용할 때 카멜 케이스여야 한다.

padding-left 대신 paddingLeft를 작성하고 margin-right 대신 marginRight를 작성해야 한다.

또한 컬러 애니메이션은 핵심 jQuery 라이브러리에 포함되어 있지 않다.

색상에 애니메이션을 적용하려면 jQuery.com에서 Color Animations 플러그인을 다운로드해야 한다 .

상대 값 사용

상대 값을 정의하는 것도 가능하다(이 값은 요소의 현재 값에 상대적임). 값 앞에 += 또는 -=를 넣으면 된다.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

미리 정의된 값 사용

속성의 애니메이션 값을 "show", "hide" 또는 " toggle" 로 지정할 수도 있다 .

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});

대기열 기능 사용

기본적으로 jQuery는 애니메이션을 위한 큐 기능과 함께 제공된다.

즉, 여러 animate()호출을 차례로 작성하는 경우 jQuery는 이러한 메서드 호출로 "내부" 큐를 생성한다. 그런 다음 애니메이트 호출을 ONE by ONE으로 실행한다.

따라서 서로 다른 애니메이션을 수행하려는 경우 대기열 기능을 활용하는 것이 좋다.

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
});

아래 예에서는 먼저 <div>요소를 오른쪽으로 이동한 다음 텍스트의 글꼴 크기를 늘린다.

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});

---

stop()

stop()메소드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용된다.

슬라이딩, 페이딩 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능에 대해 작동한다.

$(selector).stop(stopAll,goToEnd);

• stopAll 매개변수는 애니메이션 대기열도 지워야 하는지 여부를 지정한다. 기본값은 false. 즉, 활성 애니메이션만 중지되어 대기열에 있는 모든 애니메이션이 나중에 수행될 수 있다.
• goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 false.
• 따라서 기본적으로 stop()메소드는 선택한 요소에서 수행 중인 현재 애니메이션을 종료한다.

stop() 메소드에서 매개변수를 없이 사용하기:

$("#stop").click(function(){
  $("#panel").stop();
});