jQuery는 기본적으로 세 가지의 효과를 9개의 메서드로 제공한다
기본 시각 효과 메서드
- show( ) : 문서 객체를 크게 확대하며 보여준다
- hide( ) : 문서 객체를 작게 축소하며 사라지게 한다
- toggle( ) : show( ) 메서드와 hide( ) 메서드를 번갈아 실행한다
- slideDown( ) : 문서 객체를 슬라이드 효과와 함께 보여준다
- slideUp( ) : 문서 객체를 슬라이드 효과와 함께 사라지게 한다
- slideToggle( ) : slideDown( ) 메서드와 slideUp( ) 메서드를 번갈아 실행한다
- fadeIn( ) : 문서 객체를 선명하게 보여준다
- fadeOut( ) : 문서 객체를 흐리게 사라지게 한다
- fadeToggle( ) : fadeIn( ) 메서드와 fadeOut( ) 메서드를 번갈아 실행한다
- $(selector).method( );
- $(selector).method(speed);
- $(selector).method(speed, callback);
- $(selector).method(speed, easing, callback);
speed
효과를 진행할 속도를 지정합니다
밀리 초 단위의 숫자 또는 문자열 slow, normal, fast를 입력한다
callback
효과를 모두 완료하고 실행할 함수를 지정한다
easing
애니메이션의 easing 형태를 지정한다
별도의 플러그인을 사용하지 않으면 문자영 linear와 swing만 입력 가능하다
<body>
<button>Toggle Show</button>
<div class="page">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
$(function () {
$('button').click(function () {
$('.page').fadeToggle('fast');
})
});
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 34) - 상대적 애니메이션 (0) | 2020.08.14 |
|---|---|
| JS jQuery (part. 33) - 사용자 정의 효과 (0) | 2020.08.13 |
| JS jQuery (part. 31) - 입력 양식 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 30) - 윈도우 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 29) - 키보드 이벤트 (0) | 2020.08.12 |
