문서 객체를 보이게 했다가 안보이게 하려면 css의 display 속성을 이용해야 한다.
단, css를 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다.
효과(Effect)메소드를 이용하면 css를 이용하는 것 보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나
보이게 만들 수 있다.
애니메이션 메소드까지 사용하면 선택한 요소에 다양한 동작(Motion)까지 적용 할 수 있다.
효과 메소드
효과(Effect)메소드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메소드가 있다.
다음은 효과 메소드의 종류를 간략히 정리한 표이다.
| 구분 | 종류 | 설명 |
| 숨김 | hide() | 요소를 숨긴다 |
| fadeOut() | 요소가 점점 투명해지면서 사라진다 | |
| slideUp() | 요소가 위로 접히며 숨겨진다. | |
| 노출 | show() | 숨겨진 요소가 노출된다 |
| fadeIn() | 숨겨진 요소가 점점 선명해진다 | |
| slideDown() | 숨겨진 요소가 아래로 펼쳐진다 | |
| 노출, 숨김 | toggle() | hide(), show() 효과를 적용한다. |
| fadeToggle() | fadeIn(), fadeOut() 효과를 적용한다. | |
| slideToggle() | slideUp(), slideDown() 효과를 적용한다. | |
| fadeTo() | 지정한 투명도를 적용한다. |
효과 메소드의 기본형
효과 메소드는 효과 소요시간, 가속도, 콜백 함수를 인자값으로 전달 할 수 있다.
다음은 효과 메소드의 기본형이다.
$("요소 선택").효과 메소드(효과 소요시간, 가속도, 콜백함수);
효과 소요시간은 요소를 숨기거나 노출할 때 소요되는 시간이다.
효과 소요시간은 다음과 같이 적용할 수 있다.
방법 1: "show","nomal","fast"
방법 2: 1.000(1초), 500(0.5초)
가속도은 숨기거나 노출하는 동안의 가속도를 설정한다.
가속도에 적용할 수 있는 값은 다음과 같다.
방법 1: "swing"
시작과 끝은 느리게, 중간은 빠른 속도로 움직인다(기본값)
방법 2: "linear"
일정한 속도로 움직인다.
콜백 함수는 노출과 숨김 효과가 끝난 후에 실행할 함수이다. 콜백함수는 생략 할 수 있다.
다음은 id값이 'box'인 요소를 2초간 위로 올려 숨기는 예로, 가속도는 "inner"다. 요소가 숨겨지면 콜백 함수가
실행되어 "hello"라는 메시지가 나타난다.
$("#box").slideUp(2000, "linear", function(){
alert("hello");
});fadeTo()메소드
다음은 fadeTo()메소드의 기본형이다.
$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);투명도는 0~1까지의 값을 입력할 수 있다. 1에 가까울수록 선명하게 보인다.
다음은 버튼을 누르면 다양한 효과가 적용되는 예제이다.
<script>
$(function(){
$(".btn2").hide();
$(".btn1").on("click", function(){
$(".box").slideUp(1000, "linear",
function(){
$(".btn1").hide();
$(".btn2").show();
});
});
//[slideUp]버튼을 클릭하면 class값이 "box"인 요소가
//위로 접히며 숨겨진다.
//그런 다음 콜백 함수가 실행되어 [slideUp]버튼은
//숨겨지고 [fadeIn]버튼이 나타난다.
$(".btn2").on("click", function(){
$(".box").fadeIn(1000, "swing",
function(){
$(".btn2").hide();
$(".btn1").show();
});
});
$(".btn3").on("click", function(){
$(".box").slideToggle(1000,"linear");
});
//[toggleSlide]버튼을 클릭하면 class값이 "box"인 요소가 접히거나
//펴진다.
$(".btn4").on("click", function(){
$(".box").fadeTo("fast", 0.3);
});
$(".btn5").on("click", function(){
$(".box").fadeTo("fast", 1);
});
//fadeTo(0, 3)을 클릭하면 class값이 "box"인 요소가 70%투명해진다
//다시 클릭하면 투명화를 취소한다.
});
</script>
<style>
.content{
width:400px;
background-color:#eee;
}
</style>
</head>
<body>
<p>
<button class="btn1">slideUp</button>
<button class="btn2">fadeIn</button>
</p>
<p>
<button class="btn3">toggleSlide</button>
</p>
<p>
<button class="btn4">fadeTo(0,3)</button>
<button class="btn5">fadeTo(1)</button>
</p>
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet. consectetur adipiscing elit. Ut...
...
</div>
</div>
</body>
동작을 불어넣는 애니메이션 메소드
애니메이션 메소드를 적용하면 스타일을 적용한 요소를 움직이게 할 수 있다.
animate() 메소드
선택한 요소에 다양한 동작(Motion)효과를 적용할 수 있다.
예를들어 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용할 수 있다.
다음은 animate() 메소드의 기본형이다.
$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)스타일 속성은 애니메이션으로 적용할 스타일 속성이다.
적용 시간은 동작에 반응하는데 소요되는 시간이며, 적용 시간의 옵션은 효과 함수에 적용한 것과 같다.
다음은 버튼을 클릭하면 지정한 요소에 애니메이션이 적용되는 예제이다.
<script>
$(function(){
$(".btn1").on("click", function(){
$(".txt1").animate({
marginLeft:"500px",
fontSize:"30px"
},
2000, "linear", function(){
alert("모션 완료!");
});
});
$(".btn2").on("click", function(){
$(".txt2").animate({
marginLeft:"+=50px"
}, 1000);
});
});
</script>
<style>
.txt1{background-color:aqua;}
.txt2{background-color:pink;}
</style>
</head>
<body>
<p><button class="btn1">버튼1</button></p>
<span class="txt1">"500px"이동</span>
<p><button class="btn2">버튼2</button></p>
<span class="txt2">"50px"씩 이동</span>
</body>(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(비동기방식연동 Ajax) (0) | 2020.05.26 |
|---|---|
| JQuery(애니메이션 효과 제어 메소드) (0) | 2020.05.26 |
| JQuery(그룹이벤트) (0) | 2020.05.22 |
| JQuery(이벤트 객체) (0) | 2020.05.22 |
| JQuery(이벤트 등록 메소드) (0) | 2020.05.22 |