티스토리 뷰
17.9 jQuery UI Effect 플러그인 다운로드
1) jQuery UI플러그인 공식사이트 : http://jqueryui.com/
2) jQuery UI Effect 기능
◆ 색상 애니메이션
◆ addClass() , removeClass(), switchClass() 메서드에 애니메이션 기능추가
◆ Easing 효과
17.10 jQuery UIEffect 플러그인 (1) – 색상 변환 애니메이션
1) addClass(class,speed)메서드와 removeClass(class,speed) 메서드의애니메이션
2) $('div').hover( over ,out );
코드 17-29
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .reverse {
- color:White;
- background-color:Black;
- }
- </style>
- <script src="http://code.jquery.com/jquery-1.7.js"></script>
- <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
- <script>
- }, function () {
- });
- });
- </script>
- </head>
- <body>
- <div>
- <h1>Lorem ipsum</h1>
- <p>Lorem ipsum dolor sit amet</p>
- </div>
- <div>
- <h1>Lorem ipsum</h1>
- <p>Lorem ipsum dolor sit amet</p>
- </div>
- <div>
- <h1>Lorem ipsum</h1>
- <p>Lorem ipsum dolor sit amet</p>
- </div>
- </body>
- </html>
Q1. clearQueue() , stop() 사용하여 깔끔하게 수정?
(마우스에서 벗어난 엘리먼트의 최종 실행 애니메이션만 남기려면…)
Q2. 크기 , 위치 변경해보기?
#. 참고사항
addClass ,removeClass 으로 애니메이션줄때는 "코드 1"과 같이 stop(true,true) 하지않으면
현재 값을못찾아 애니메이션이 안될수있는 거 같습니다.
하지만 "코드 2"와같이 다른 메소드들은 애니메이션 앞에 stop() 로 clearQueue 와
goToEnd 속성을 true 줄필요가 없습니다. 애니메이션 전에 항상 stop() 이있어서 애니
메이션 큐에 애니메이션이 쌓이지 않고 현재 값에서 다음 애니메이션으로 진행되기 때문에
goToEnd 를 true 로 줄필요가 없습니다.
stop() 메소드 관련 내용은 http://cafe.naver.com/hjavascript/297 참고.
코드 1
- }, function () {
- });
코드 2
- }, function () {
- });
출처 : javaScript jQuery 입문
'HMLT&CSS&JS > study' 카테고리의 다른 글
| [모던웹]6.10~18_객체지향 프로그래밍 (0) | 2014.03.17 |
|---|---|
| [모던웹] 17.11 jQuery UI Effect 프러그인 (2) – easing 플러그인 (ease) (0) | 2014.03.17 |
| [모던웹] 17.8 jQuery Approach플러그인 (0) | 2014.03.17 |
| [모던웹] 17.7 애니메이션 지연 (0) | 2014.03.17 |
| [모던웹]17.6 애니메이션 정지 (0) | 2014.03.17 |
- Total
- Today
- Yesterday