[jQuery] 시각적 효과

 

 

 

 

 

 

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만 입력 가능

 

 

 

 

toggle() 예제 -1

 

See the Pen toggle by Nyoung (@dmsud2899) on CodePen.

 

> <h1> 태그 해당 영역 클릭시 toggle() 메서드 실행

 

 

 

toggle() 예제 - 2

 

See the Pen toggle2 by Nyoung (@dmsud2899) on CodePen.

 

> 예제 1과 같음. jQuery -1.7버전

 

 

 

animate()와 stop() 활용 예제

 

See the Pen animate() by Nyoung (@dmsud2899) on CodePen.

 

> clearQueue() 메서드는 실행되는 애니메이션 정지 기능이 없음

> stop()메서드는 효과와 애니메이션을 정지함

> 첫 번째 stop : 멈추고 돌아옴

> 두 번째 stop : 멈추고 갔다가 돌아옴 <- setInterval() 함수가 실행될 때 까지 대기

> 세 번째 stop : 생략하고 돌아옴

> 네 번째 stop : 생략하고 멈춤 <- setInterval() 함수가 실행될 때 까지 대기

 

 

 

 

stop() 메서드의 사용

 

> $(selector).stop();

> $(selector).stop(clearQueue);

> $(selector).stop(clearQueue, goToEnd);

> 매개 변수를 입력하지 않으면, 자동으로 false 입력으로 간주함

> clearQueue를 true로 설정 : clearQueue() 메서드를 실행하는 것과 같은 효과

> goToEnd를 true로 설정 : 지정한 최종 형태에서 멈춤

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

---