유용한 정보를 공유할 수 있는 자유게시판 입니다.
jQuery 기본 효과 매소드 show, hide, toggle, fadein, fadeout, sidedown, slideup
jQuery 기본 효과 매소드
show() : 크게 하면서 보여 줌
hide() : 작게 하면서 사라지게 함
toggle() : show, hide 번갈아 실행
slideDown() : 슬라이드효과와 함께 보여줌
slideUp() : 슬라이드 효과와 함께 사라지게
slideToggle() : slideDown, slideUp을 번갈아
fadeIn() : 선명하게 하면서 보여 줌
fadeOut() : 흐리게하면서 사라지게
fadeToggle() : fadeIn, fadeOut을 번갈아
jQuery 기본 효과 매소드 사용방법
$(selector).method();
$(selector).method(speed):
$(selector).method(speed, callback);
$(selector).method(speed, easing, callback);
speed : 효과를 진할 할 속도, 미리초 단위 숫자 or slow, normal, fast 입력
callback : 효과를 다 진행한 후 실행할 함수
easing : 애니메이션의 easing 속도 지정, 별도 플러그인 사용안하면 문자열 linear, swing만 입력 가능
[예제]
H1 태그 클릭시 문서 객체의 바로 다음 위치 객체에 toggle 매소드 적용 => 사라젔다 보였다를 반복
function() { function() { function() { ... } } }
<script>
$(document).ready(function() {
$("h1").click(function() {
$(this).next().toggle("slow", function() {
alert("toggle");
});
});
});
</script>
<body>
<!-- h1 태그 클릭 다음 div 태그 토글되어 사라졌다 보였다 반복 -->
<h1>필리핀어학연수 필스쿨닷컴 유학포커스</h1>
<div>
<h1>필스쿨닷컴</h1>
<p>필리핀어학연수 유학포커스</p>
</div>
<h1>www.philschool.com</h1>
<div>
<h1>필스쿨닷컴</h1>
<p>필리핀어학연수 유학포커스</p>
</div>
</body>