| 이름 | 설명 |
| 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만 입력 가능하다
toggle 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function (){
//이벤트를 연결
$('button').click(function (){
//간단한 효과를 적용
$('.page').toggle('slow');
})
})
</script>
</head>
<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>
</html>slideToggle 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function (){
//이벤트를 연결
$('button').click(function (){
//간단한 효과를 적용
$('.page').slideToggle('slow');
})
})
</script>
</head>
<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>
</html>fadeToggle 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function (){
//이벤트를 연결
$('button').click(function (){
//간단한 효과를 적용
$('.page').fadeToggle('slow');
})
})
</script>
</head>
<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>
</html>
각각의 이벤트에 따라 일어나는 이벤트 효과가 다르다.
사용자 정의 효과
| 이름 | 설명 |
| animate() | 사용자 지정 효과를 생성 |
- $(selector).animate(object);
- $(selector).method(object, speed);
- $(selector).method(object, speed, easing);
- $(selector).method(object, speed, easing, callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function (){
$('div').hover(function (){
$(this).animate({
left:500
}, 'slow');
}, function (){
$(this).animate({
left:0
},'slow');
})
})
</script>
<style type="text/css">
div{
width: 50px; height: 50px;
background-color: orange;
position: relative;
}
</style>
</head>
<body>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</body>
</html>
'JS 프레임워크 > jQuery' 카테고리의 다른 글
| [jQuery] toggle(토글) 복습 (0) | 2021.04.14 |
|---|---|
| [jQuery] 이미지 슬라이더 (0) | 2021.04.14 |
| [jQuery] 이벤트 (0) | 2021.04.13 |
| [jQuery] 문서 객체 (0) | 2021.04.10 |
| [jQuery] 문서 객체 선택과 탐색 (0) | 2021.04.10 |
