2013년 10월 29일 화요일

jQuery 기본 효과 메소드, show, hide, toggle, fadein, fadeout, slidedown, slideup


jQuery 기본 효과 메소드, show, hide, toggle, fadein, fadeout, slidedown, 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 메소드 적용,
-->  사라졌다 보였다를 반복
 
<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>
 

 



[취업확정]오라클자바개발잘하는신입뽑기2개월 40일 320시간   11-13
웹퍼블리싱 마스터 14일 42시간   11-05
웹퍼블리싱 마스터 6일 42시간   11-02


댓글 없음:

댓글 쓰기