[jQuery] 효과 이벤트 메서드

1. jQuery hide() and show()

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

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

ex)

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

2. jQuery toggle() <- 숨기기/표시 전환

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

3. jQuery Fading Methods

1) fadeIn() - 숨겨진 요소가 점점 나타나는 것

2) fadeOut() - 나타났던게 숨겨지는 것

3) fadeToggle() - 숨겨졌다 나타났다 하는 것

4) fadeTo() - 지정된 불투명도(0과 1사이의 값)로 페이딩

ex) $("#div1").fadeTo("slow", 0.15);

4. jQuery Sliding Methods

1) slideDown() - 아래로 슬라이드함

2) slideUp() - 슬라이드를 업함

3) slideToggle() - 슬라이드 업&다운함

5. jQuery Animations

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

1) Manipulate Multiple Properties

$("div").animate({
	left: '250px',
    opacity: '0.5',
});

2) Using Relative Values

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

3) Using Pre-defined Values

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

4) Uses Queue Functionality

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

6. jQuery stop() Method

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

7. jQuery Callback Functions

• 현재 효과가 완료된 후에 실행됨

ex)
$("p").hide("slow", function() {
	alert("The paragraph is now hidden");
});

8. jQuery Method Chaining

• 동일한 요소에서 여러 jQuery 명령을 차례로 실행할 수 있는 연결

ex) $("#p1").css("color", "red").slideup(2000).slidedown(2000);