jQuery Tutorial (2)

효과

show() / hide()

요소를 표시하고 숨기는 명령

• $(selector).sohw(speed, [callback]);
• $(selector).hide(speed, [callback]);

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

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

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

또는

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

---

toggle()

공개 또는 숨김 사이에서 요소의 표시 상태를 전환하는 메소드

• $(selector).toggle([speed][, callback]);

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

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

---

slideDown() / slideUp() / slideToggle()

요소를 위아래로 미끄러져 표시

• $(selector).slideDown([speed][, callback]);
• $(selector).slideUp([speed][, callback]);
• $(selector).slideToggle([speed][, callback]);

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

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

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

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

---

fadeIn() / fadeOut() / fadeToggle()/ fadeTo()

불투명도를 조정

• $(selector).fadeIn([speed][, callback]);
• $(selector).fadeOut([speed][, callback]);
• $(selector).fadeToggle([speed][, callback]);
• $(selector).fadeTo([speed][, callback]);

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

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

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

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

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

---

animate()

사용자 정의 애니메이션을 작성하는데 사용

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

params : 애니메이션이 이동할 css 속성의 맵

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

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

또는

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

또는

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

또는 

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

또는

$("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");
}); 

또는

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

---

stop()

애니메이션이나 효과가 끝나기 전에 중지하는데 사용

• $(selector).stop([clearQueue], [gotoEnd]);

clearQueue : 선택적 매개변수. true로 설정하면 애니메이션 큐가 지워짐. 큐에 있는 모든 애니메이션이 효과적으로 중지

gotoEnd : 선택적 매개변수. true로 설정하면 표시 및 숨기기시 원래 스타일을 재설정하고 콜백 ㅎ마수를 호출하는 등 현재 재생중인 애니메이션이 즉시 완료

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

---

callback

효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있는데 이를 방지

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

speed : 3개의 미리 정의된 속도 중 하나 또는 애니메이션을 실행하는 밀리 초 수를 나타내는 문자열

callback : 선택적 매개변수로 애니메이션이 완료될 때마다 실행될 함수를 나타냄. 각 요소에 대해 한 번씩 실행

# callback이 있는 예시
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});
// hide가 적용된 후 alert 출력


# callback이 없는 예시
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});
// alert 출력 후 hide가 적용

---

chaining

단일 명령문 내에서 동일한 요소에서 여러 jQuery 메소드를 실행

• 동일한 요소를 두 번 이상 찾을 필요가 없음
• 동작을 연결하려면 단순히 이전 동작에 동작을 추가
• 코드 줄이 길어지는 경우 줄 바꿈 및 들여쓰기를 사용하여 작성

# 텍스트가 빨간색으로 바뀐 뒤 위아래로 슬라이드 됨

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

또는

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);