[jQuery] Effects

Posted in WebFont-end/jQuery by devbox

Effects


플래시 전용으로만 생각되었던 다양한 모션 그래픽과 애니매이션 그리고 인터랙티브들을 웹 표준에서 작업할 수 있게 제공해주는 것이 바로 JQuery의 Effects와 Custom와 Custom Animations이다.



1. effect 함수의 매개변수

(1) duration

시간 값으로, 1/1000밀리세컨드 단위이다.

문자열로 "show", "normal", "fast"를 사용할 수도 있으며, 이는 각각 200, 400, 600 밀리세컨드를 의미한다.

매개변수 생략시 기본 값은 normal이며 400밀리세컨드로 움직이게 된다.(show(), hide() 제외)


(2) easing

easing 함수란, 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미한다.

jQuery가 기본적으로 가지고 있는 easing 표현은 swing, linear이다. 더 많은 easing효과는 jQuery UI site를 방문한다. 단, easing 함수는 플러그인이므로 관련된 라이브러리를 포함하고 있어야만 사용할 수 있다.


(3) callback

콜백 함수는 스스로 호출되는 함수의 의미로 이 챕터에서는 이펙트 애니메이션 효과가 완료되면 자동으로 호출되는 함수를 말한다.

콜백 함수는 매개변수를 전달할 수는 없지만 this 키워드는 자동으로 전달된다. 콜백 함수 내부 코드에서 this는 이펙트 애니메이션의 주체인 요소 노드를 의미한다. 

특정 이펙트 애니메이션 효과를 지속적으로 반복하고 싶을 때 자주 사용되는 함수이다.


2. Basics

Basics는 말 그대로 기본 효과이다. 기본 효과는 HTML 객체를 보이거나 감추는 기능이다.

여기에 시간을 정해주면 약간의 애니메이션 효과를 줄수 있다. 이 함수를 적용하면 객체는 CSS의 display 상태를 변경해주는데, hide() 함수는 display:none로 바꿔주고,

show() 함수는 display:block 또는 display:inline으로 바꿔주게 된다. display:nonel상태가 되면 DOM 영역에서 제거되면서 그 빈 부분을 다른 HTML이 채우게 된다.

opacity:0으로만 해서는 DOM에서 제거되지 않는다.


(1) hide()

.hide() Returns: jQuery

hide() 함수에 매개 변수가 전달되지 않으면 즉시 노드의 상태를 display:none으로 변경하면서 눈에 보이지 않게 된다.


.hide(duration ([,callback])        Returns: jQuery

서서히 보이지 않게 하려면 시간 값(1/1000)을 매개 변수로 전달해주면 된다.


.hide([duration] [,easing] [,callback])        Returns: jQuery

easing은 요소의 애니메이션 상태에 다양한 가.감속등을 설정할 수있다.

세번째 매개변수인 콜백 함수가 지정되면 모든 hide() 작업이 끝난 후에 호출된다.


(2) show()
show() returns: jQuery
show() 함수에 매개 변수가 전달되지 않으면 즉시 노드의 상태를 display:block 또는 inline으로 변경하면서 눈에 보이게 된다.

.show(duration [,callback])      returns: jQuery
서서히 보이게 하려면 시간 값을 매개 변수로 전달한다.

.show([duration] [,easing] [,callback])        returns: jQuery
show 기능이 모두 끝나고 난 후에 호출된 콜백 함수이다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hide()/show()</title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
</style>
</head>
<body>
<img src="sample1.jpg" alt="" width="300" height="307" />
<br />
<button id="hide">hide()</button>
<button id="show">show()</button>
<script>
$('#show').click(function() {
$('img').show(1000, function() {
alert('지금 상태는' + $(this).css("display") + "입니다.");
});
});
// id가 hide인 버튼을 클릭하면 1초 동안 hide() 효과가 나타나면서 img가 보이지 않는 상태로 변경되고, 경고 창으로 현재 이미지의 display 상태를 출력한다.
$('#hide').click(function() {
// 이미지에 1초 동안 hide() 효과가 나타난 후, 콜백 함수를 호출한다.
$('img').hide(1000, function() {
alert('지금 상태는' + $(this).css("display") + "입니다.");
});
});
</script>

</body>
</html>

------>   ------>  

cf.) jQuery로 선택된 요소를 숨기는 방법에는 아래와 같이 두 가지 방법이 있을 수 있는데, 이 둘의 차이
$("요소").css("display:none");
$("요소").css("display:none");를 사용하면 style="display:none"과 같이 inline style 형식으로 처리되면서 요소가 사라진다.

$("요소").hide();
hide()를 사용하여 요소를 숨기게 되면 display 속성 값을 jQuery의 데이터 캐시에 저장해두기 때문에 show()나 toggle에 의해 복원될 때에 display 설정을 초기값으로 전환해준다.

(3) toggle()
toggle()은 show()와 hide()를 번갈아 실행시켜주는 함수이다.
만약 상태가 show이면 hide로 hide이면 show로 바꿔줁다.
toggle([duration] [,callback]) returns: jQuery

3. Fading
fading은 요소의 불투명도(opacity)만을 조절하는 함수이다. 크기를 조절하지 않는 것을 빼면 show(), hide()와 다르지 않다. 요소의 원래 불투명도를 기억하고 있으면서 점점 흐리게 또는 밝게 조절할 수 있다.
물론 여기도 fadeToggle()이라는 함수로 fadeIn, fadeOut 함수를 번갈아 실행할 수 있다. 또 하나 주의 깊게 보아야 할 부분은 fadeTo() 함수로, 이 함수는 불투명도 값을 지정하여 그 불투명도까지 애니메이션을 수행해준다.
하지만 이 함수는 display 상태를 none로 만들지 않기 때문에 영역은 그대로 유지된다.

 함 수

 기 능

 fedeIn()

 opacity 0에서 1로 전환하며 서서히 나타나게 처리한다.

 display 상태는 block이나 inling으로 설정된다.

 fadeOut()

 opacity 1에서 0로 전환하며 서서히 사라지게 처리한다.

 display 상태는 none로 설정된다.

 fadeToggle()

 fadeIn()과 fadeOut()을 번갈아 가며 실행해준다.

 fadeTo()

 불투명도(opacity)를 지정하여 fade를 조절한다.


(1) fadeIn()
.fadeIn([duration] [, easing] [callback]) returns: jQuery
fadeIn() 함수가 시작되고 display 상태가 none으로 되어 있을 때에는 가장 먼저 display 상태를 원래대로 바꾸고, opacity가 0에서 1로 변경되면서 서서히 나타나도록 한다. 
매개변수의 의미는 hide()/ show() 함수와 같다. 단 [duration] 매개변수를 생략하면 기본 값인 400 밀리컨드로 움직인다.

(2) fadeOut()
.fadeOut([duration] [, easing] [, callback])     returns: jQuery
.fadeOut() 함수가 시작되면, opacity가 1에서 0으로 변경되면서 서서히 사라지도록 한다. 모두 사라지면 display 상태를 none으로 설정한다. 단, [duration] 매개 변수를 생략하면 기본 값인
400 밀리세컨드로 움직인다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> fadeIn() fadeOut()   </title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img src="sample2.jpg" alt="" width="300" height="307" />
<br/>
<button id="fadeOut">fadeOut</button>
<button id="fadeIn">fadeIn</button>
<!---------- jQuery code Start ---------->
<script>
$("body").append("<p></p>");

$('button#fadeOut').click(function() {
   $('img').fadeOut(1000, function() {
    $("p").text('지금 display 값은 '+$(this).css("display")+" 입니다.");
  });
});
$('button#fadeIn').click(function() {
   $('img').fadeIn(1000, function() {
    $("p").text('지금 display 값은 '+$(this).css("display")+" 입니다.");
  });
});
</script>
</body>
</html>

----->    ------>  

(3) fadeToggle()

.fadeToggle([duration] [, easing] [, callback]) returns: jQuery

.fadeToggle() 함수는 fadeIn()m fadeOut() 함수를 교대로 수행해준다.


(4) fadeTo()

.fadeTo(duration, opacity  [, easing]  [, callback]) returns: jQuery

fadeTo() 함수는 opacity를 지정하여 서서히 사라지거나 나타나게 한다. opacity 값의 범위는 0~1 사이이다.

불투명도는 이미지 효과를 적용하는 등과 같이 다양하게 사용된다.


※ 다른 함수와 차이점

- fadeTo() 함수는 반드시 duration을 명시해주어야 한다.

- fadeTo() 함수는 opacity가 0으로 되어 있기 때문에 눈에 보이지 않더라도 display 상태를 none으로 변경하지 않는다. 따라서 문서의 구조에 영향을 미치지 않는다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> fadeTo()  </title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

</head>

<body>

<img src="sample3.jpg" alt="" width="300" height="307" />

<br>

// opacity를 변화시킬 버튼 4개를 준비한다. <button> 태그의 title 값에 opacity 값을 설정해 놓았다.

<button title="0">0</button>

<button title="0.3">0.3</button>

<button title="0.6">0.6</button>

<button title="1">1</button>

<!---------- jQuery code Start ---------->

<script>

$("body").append("<p></p>");

$('button').click(function() {

var opacity = $(this).attr("title");

    $('img').fadeTo("slow" , opacity ,  function() {

    $("p").append('display : '+$(this).css("display")+"<br/>");

$("p").append('opacity : '+$(this).css("opacity")+"<br/>");

  });

});

</script>

</body>

</html>


4. Sliding Effects
Sliding 효과는 노드의 높이를 조절하여 접혔다 하는 효과를 보여준다. 매개변수로는 [duration] [ ,callback] [sildeToggle]이 가능하다.
아주 간단한 함수지만 접었다 폈다 하는 기능을 가진 어코디언 메뉴와 세로 내비게이션 등에 많이 사용된다.

 함수

 기 능

 sildeDown()

 슬라이딩 스타일로 요소를 보이게 한다.

 sildeUp()

 슬라이딩 스타일로 요소를 숨기게 한다.

 sideToggle()

 slideDown()와 sildeUp()를 반복하여 바꿔준다.



(1) slideDown()
.slideDown([duration] [, easing] [, callback])      returns: jQuery
slideDown은 노드의 높이 값을 0부터 원래 가지고 있던 높이까지 늘리면서 펼쳐주는 효과를 나타낸다. 물록 최종적으로 display 상태가 block이나 inline이 될 것이다.

(2) slideUp()
.slideUp([duarion] [ ,callback]) returns: jQuery
slideUp은 노드의 현재 높이 값에서 0까지 줄어들어 접는 효과를 나타낸다. 최종적으로 display 상태는 none이 된다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> slideDown() slideUp() </title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
</style>
</head>
<body>
<div>
<img src="sample1.jpg" alt="" width="300" height="307"/>
</div>
<button id ="up">slide감추기</button>
<button id ="down">slide보이기</button>
<!---------- jQuery code Start ---------->
<script>

$('#up').click(function() {
  // <div> 태그의 slideUp()을 실행하면 1초 동안 접히게 된다.
  $('div').slideUp(1000, function() {
    alert('지금 상태는'+$(this).css("display")+"입니다.");
  });
});

$('#down').click(function() {
  $('div').slideDown(1000, function() {
    alert('지금 상태는'+$(this).css("display")+"입니다.");
  });
});
</script>
</body>
</html>

          ------------>


(3) slideToggle()

slideToggle()([duration] [, callback]) returns: jQuery
slideToggle() 함수는 slideUp()와 slideDown()를 번갈아 실행시켜주는 함수이다.
매개변수와 관련된 의미는 다른 effect 함수들과 같다.


저작자표시

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Chain  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07

Trackback : Comment