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