jQuery 기본 효과 메소드, show, hide, toggle, fadein, fadeout, slidedown, slideup
jQuery 기본 효과 메소드
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>
[개강확정강좌]오라클자바커뮤니티에서 운영하는 개발자 전문교육 ,개인80%환급(www.onjprogramming.co.kr)
[주간]
[11/4]Spring3.X, MyBatis, Hibernate실무과정
[11/6]SQL초보에서실전전문가까지
[평일야간]
[11/1]C#,ASP.NET마스터
[11/5]iPhone 하이브리드 앱 개발 실무과정
[11/7]JAVA&WEB프레임워크실무과정
[11/8]Spring3.X, MyBatis, Hibernate실무과정
[주말]
[11/2]C#,ASP.NET마스터
[11/2]Spring3.X, MyBatis, Hibernate실무과정
[11/2]JAVA&WEB프레임워크실무과정
[11/9]안드로이드개발자과정
[주간]
[11/4]Spring3.X, MyBatis, Hibernate실무과정
[11/6]SQL초보에서실전전문가까지
[평일야간]
[11/1]C#,ASP.NET마스터
[11/5]iPhone 하이브리드 앱 개발 실무과정
[11/7]JAVA&WEB프레임워크실무과정
[11/8]Spring3.X, MyBatis, Hibernate실무과정
[주말]
[11/2]C#,ASP.NET마스터
[11/2]Spring3.X, MyBatis, Hibernate실무과정
[11/2]JAVA&WEB프레임워크실무과정
[11/9]안드로이드개발자과정
댓글 없음:
댓글 쓰기