jQuery 기본 효과 메소드 이론및 실습입니다. 참조하세요
오라클자바커뮤니티에서 설립한 오엔제이프로그래밍 실무교육센터
(오라클SQL, 튜닝, 힌트,자바프레임워크, 안드로이드, 아이폰, 닷넷 실무전문 강의)
show() : 크게 하면서 보여 줌 hide() : 작게하면서 사라지게 함
toggle() : show, hide 번갈아 실행 slideDown() : 슬라이드효과와 함께 보여줌
slideUp() : 슬라이드 효과와 함게 사라지게 slideToggle() : slideDown, slideUp을 번갈아
fadeIn() : 선면하게 하면서 보여 줌 fadeOut() : 흐리게하면서 사라지게
fadeToggle() : fadeIn, fadeOut을 번갈아
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 만 입력 가능
callback : 효과를 다 진행한 후 실행할 함수
easing : 애니메이션의 easing 속성 지정, 별도 플러그인 사용안하면 문자열 linear, swing 만 입력 가능
[예제]
H1 태그 클릭 시 문서 객체의 바로 다음 위치 객체에 toggle 메소드 적용,
--> 사라졌다 보였다를 반복
<script type="text/javascript">
$(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><font color=blue>OnjProgramming.co.kr</font></h1>
<div>
<h1>오라클자바</h1>
<p>닷넷, 스마트폰 개발교육</p>
</div>
</body>
$(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><font color=blue>OnjProgramming.co.kr</font></h1>
<div>
<h1>오라클자바</h1>
<p>닷넷, 스마트폰 개발교육</p>
</div>
</body>
댓글 없음:
댓글 쓰기