티스토리 뷰
1. fade 이벤트 - 역할
fadeIn() - 문서 객체를 천천히 보여줌
fadeOut() - 문서 객체를 천천히 사라짐
fadeToggle() - fadeIn() 메서드와 fadeOut() 메서드를 번갈아 실행
◈ 구문형식
fadeIn( speed , callback , easing)
- speed : 효과를 진행할 속도 지정 (입력 - 밀리 초 단위의 숫자 , 문자열(slow,normal,fast))
- callback : 효과를 수행후 실행할 함수 지정
- easing : easing 형태를 지정 (입력 - linear,swing)
2. fade 이벤트 - 예제
◈ 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script> <script> $(document).ready(function () { $("#btn").click(function (event){ $("#content").fadeToggle(); }); }); </script> <body> <input id="btn" type="button" value="버튼"> <div id="content"> fade 테스트 입니다. </div> </body> |
◈ 결과화면
- 처음화면
- 버튼을 클릭 했을 때
- 버튼을 한번 더 클릭 했을 때
'[개발]프로그래밍 > jquery' 카테고리의 다른 글
| [jquery] animate() - 사용자 지정효과 (0) | 2016.10.24 |
|---|---|
| [jquery] 입력 양식 - 이벤트 (0) | 2016.10.24 |
| [jquery] 윈도 - 이벤트 정리 (0) | 2016.10.20 |
| [jquery] 키보드 - 이벤트 정리 (0) | 2016.10.20 |
| [jquery] 마우스 - 이벤트 정리 (0) | 2016.10.20 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday