Effects 주요 메서드

hide / show / toggle

hide()

• $(selector).hide(speed,callback);
• speed: 속도 지정 가능, "slow", "fast", milliseconds
  • $("p").hide(1000);
  • $("div").hide("slow");
• callback 함수: hide가 끝난 후에 호출될 함수
• display:none 으로 바뀜

show()

• $(selector).show(speed,callback);
• display:none 속성이 지워짐

toggle() - hide & show

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

예제

201006Ex01: 파일참고

fadeIn / fadeOut / fadeToggle

fadeIn()

• $(selector).fadeIn(speed,callback);
• 숨겨진 요소를 불투명 효과를 주면서 display:none 속성을 지움

fadeOut()

• $(selector).fadeOut(speed,callback);
• 보이는 요소를 불투명 효과를 주면서 display:none으로 바꿈

fadeToggle()

• $(selector).fadeToggle(speed,callback);
• fadeIn과 fadeOut을 번갈아가며 수행

fadeTo()

• $(selector).fadeTo(speed, opacity, callback);
• 필수값: speed, opacity
• opacity: 0~1, 불투명도 설정 가능
• 숨겨진 요소는 fadeIn 으로, 보이는 요소는 fadeOut 으로 수행 (toggle 되는건 아님)
• 잘안씀

예제

201006Ex01: 파일참고

slideUp, slideDown, slideToggle

slideUp()

• $(selector).slideUp(speed,callback);
• 보이는 요소를 위로 미끄러지는 효과를 주면서 숨김

slideDown()

• $(selector).slideDown(speed,callback);
• 숨겨져 있던 요소를 아래로 미끄러지는 효과를 주면서 보여줌

slideToggle()

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

예제

201006Ex02: 파일참고

201006Ex03

• event.preventDefault, attr() 이용

$(document).ready(function() {
  $("#ex1a1").click(function(e) {
    e.preventDefault(); // a 클릭해도 링크 열리지 않도록
    $("#foodImg").slideUp("slow",function() {
      $("#foodImg").attr("src",$("#ex1a1").attr("href"));
      $("#foodImg").slideDown("slow");
    });
  });

  $("#ex1a2").click(function(e) {
    e.preventDefault();
    $("#foodImg").fadeOut("slow",function() {
      $("#foodImg").attr("src",$("#ex1a2").attr("href"));
      $("#foodImg").fadeIn("slow");
    });
  });

  $("#ex1a3").click(function(e) {
    e.preventDefault();
    $("#foodImg").hide("slow",function() {
      $("#foodImg").attr("src",$("#ex1a3").attr("href"));
      $("#foodImg").show("slow");
    });
  });
});

<h1>메뉴판</h1>
<ul>
  <li>
    <a href="../../images/food/burger.png" id="ex1a1">햄버거</a>
  </li>
  <li>
    <a href="../../images/food/burrito.jpg" id="ex1a2">부리또</a>
  </li>
  <li>
    <a href="../../images/food/lunchbox.png" id="ex1a3">도시락</a>
  </li>
</ul>
<hr color="red">
<img src="../../images/food/apple.png" id="foodImg">

animation

animate()

• $(selector).animate({params}, speed, callback);
• 필수값: {params}
• {params}: 애니메이션할 CSS 속성 정의
• 사용자 지정 애니메이션을 만들 때 사용

예제

201006Ex01: left 250px에 도달할때까지 div오른쪽으로 이동

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

callback, chaining

Callback 함수

• 현재 작업(효과)가 완료된 후 실행
• 예제 다시 정리하기

Chaining

• 메소드를 연결해서 실행 가능
• $("#p1").css("color, "red").slideUp().slideDown();

예제

201006Ex04

callback 함수를 쓰지 않을 때

• hide 가 완료되지 않은 상태에서 alert 창이 뜬다.

$("button").click(function() {
  $("p").hide("slow");
  alert("숨김");
});

callback 함수 사용시

$("button").click(function() {
  $("p").hide("slow", function(){
    alert("숨김");
  });
});