본문 바로가기
jquery

7. 효과

DRAGON.Q 2017. 11. 15. 23:31


소개
  - 탄탄한 저 수준의 애니메이션 메서드와 여러가지 미리 정의된 효과를 가지고 있음.

Animate 메서드
 - 원하는 사용자 정의 효과를 구동하도록 애니메이션을 완벽하게 제어할 수 있다. 
   1. css 속성 제어 
   2. scrollTop과 scrollLeft DOM 속성을 제어 
   3. css의 pixe, em inch, 퍼센티지 등 사용 가능
   4. 요소 현재 상태에 대해 상대 또는 고정 값으로 효과의 종점 지정 
   5. toggle 값으로 상태전환
   6. 에니메이션에 이징(easing) 메서드를 지정 할 수 있음
   7. 애니메이션 모든 지점에서 콜백을 설정
   8. 애니메이션을 큐에 넣거나 동시에 실행을 하도록 지정 할 수 있음.

팁
 - 애니메이션 속성은 반드시 카멜 표기법을 사용해야된다 예를 들어 margin-left 가 아니라 amrginLeft 를 사용해야 한다.  이를 따르지 않으면 애니메이션이 동작하지 않는다.

애니메이션 속도
 - speed 매개변수는 밀리초 혹은 몇몇 미리 정의된 문자열이 지정될 수 있다.
  1. slow 는 600 밀리 초를 의미
  2. fast 는 200 밀리 초를 의미 
  3. 기본값은 400 밀리초 

7.1 요소를 슬라이딩 및 페이딩하기
 - 컨텐츠의 특정 영역을 눈에 보여지게 하거나 토글이 가능하게 만들려고 한다.

슬라이드

$(document).ready(function () {
  $('#animate-slide').click(function () {
    $('.box').slideToggle('slow');
});


페이드 

 $(document).ready(function () {
    $('#animate-fade').click(function () {
      $('.box').animate({ opacity : 'toggle' }, 'slow');
});


혼합

$(document).ready(function () {
$('#animate-both').click(function () {
  $('.box').animate({
    opacity: 'toggle',
    height: 'toggle
});
});


slide 메서드는 다음과 같은 종류가 있다.
 1. slideUp
 2. slideDown
 3. slideToggle
fade 메서드는 명시적인 토글 기능을 가지고 있지는 않지만 토글의 기능을 수행 할수 있다.
 1. fadeIn
 2. fadeOut
 3. fadeTo

fadeTo를 제외한 모든 메서드는 첫번째 매개변수로는 speed 가지며, 두번째 매개변수로는 콜백 함수를 갖는다 ( 두가지 모두 선택적) 하지만 fadeTo 대신 animate를 사용할 것을 권고한다.

7.2 위쪽으로 슬라이드하면서 요소 보이게 하기 
 문제점
 - 컨텐츠를 나타낼 경우 반드시 위쪽으로 슬라이드 하려고 할때 

해결방법
 HTML
 - 에니메이션을 적용할 요소를 정대 위치를 지정하여 하단 위치에 딱 붙도록 할 필요가 있다.
   이를 위해 애니메이션 요소를 <DIV>요소로 감 쌀 필요가 있다. 
 

 <input type="button" id="animate" value="animate" />
  <div class="box">
    <div id="revealUp">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>     
    </div>
  </div>


CSS
 - box 요소에 상대적 위치를 지정하고 그에 대응하여 #revealUp 에는 절대 위치를 저정


<style type="text/css">
  .box {
    background-color: #fff;
    position: relative;
  }
 
  #revealUp {
    height: 0;
    overflow: hidden;
    position: absolute
    display: none;
    bottom: 0;
    background-color: #c00;
  }
</style>


JQuery
 - 요소의 높이를 기반으로 하여 #revealUp 요소를 토글하면 된다. 


 $(document).ready(function () {
    // animates until bottom is completely visible
    // $('#animate').click(function () {
    //   $('#revealUp').slideToggle();
    // })
 
    // animates until the element's top is completely visible
    $('#animate').click(function () {
      var $box = $('#revealUp');    
      if ($box.height() > 0) {
        $box.animate({ height : 0 });
      } else {
        $box.animate({ height : '100%' });
      }
    });
  });


이 해결 방법은 박스의 높이를 검사한 다음 어떻게 처리할 것인지 결정하고 있다. 

여기서는 sldieToogle을 사용하지 않았다. slideToogle은 .animate({ height : 'toggle' }); 을 사용하는 것과 같진 않지만 내부적으로 상당히 유사한 동작을 하는 메서드이다.토글을 사용하지 않는 이유는 토글이 올바로 동작하기 위해서는 실제 높이를 어떻게든 알아야 하는데 0에서 시작하는 요소의 경우 jQuery가 전체 높이가 얼마나 되는지 알아낼 방법이 없다.

7.3 수평 아코디언 만들기
  문제점
  - 수평적으로 동작하는 아코디언을 만들기 위해서는 별도의 CSS를 작성해야 하며, 완전히 별개의 jQuery 코드를 
  사용해야 한다.

 해결방법
  HTML 

<div id="accordionWrapper">
    <h3 class="red"><a href="#red">Red</a></h3>
    <div id="red" class="red box"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <h3 class="green"><a href="#green">Green</a></h3>
    <div id="green" class="green box"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <h3 class="blue"><a href="#blue">Blue</a></h3>
    <div id="blue" class="blue box"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

 CSS

.box {
    background-color: #fff;
    position: relative;
    overflow: hidden
  }
 
  #accordionWrapper {
    margin: 10px;
  } 
  #accordionWrapper h3 a {
    text-indent: -9999px;
    height: 150px;
    width: 50px;
    float: left;
  } 
  #accordionWrapper .red {
    background: #c00 url(images/red.png) no-repeat;
  } 
  #accordionWrapper .green {
    background: #0c0 url(images/green.png) no-repeat;
  }
  #accordionWrapper .blue {
    background: #00c url(images/blue.png) no-repeat;
  } 
  #accordionWrapper div.box {
    float: left;
    height: 150px;
    width: 150px;
    border: 0;
    margin: 0;
    background-image: none;
  }


 jQuery

$.fn.horizontalAccordion = function (speed) {
return this.each(function () {
var $accordionHeaders = $(this).find('h3'),
    $open = $accordionHeaders.next().filter(':first'),
    width = $open.outerWidth();
    
  // initialise the display
  $accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });
  $accordionHeaders.click(function () {
    if ($open.prev().get(0) == this) {
      return;
    }
 
    $open.animate({ width: 0 }, { duration : speed });
    $open = $(this).next().animate({ width : width }, { duration : speed });
  })
});
};


DOM의 탐색과 모든 클릭 처리는 <A> 요소가 아닌 <h3>요소로부터 일어난다. 
플러그인은 우선 아코디언의 필수 부분들, 즉 헤더와 첫 번재로 보여지는 패널, 그리고 패널의 너비값을 구하고 있다. 

var $accordionHeaders = $(this).find('h3')

여기서 this는 현재 아코디언의 래퍼 요소로서 일반적으로 <div>이다. 아코디언 래퍼 내에서 코드는 우선 모든 <h3> 요소를 수집하고 있다. DOM 트리 안에서 DOM 컬렉션을 <H3>로 부터 다음 노드로 변경하기 위해 next() 와 prev()를 활용한다.

$open = $accordionHeaders.next().filter(':first'),

$open은 현재 보이는 패널을 가리킬 임시변수이다. 

width = $open.outerWidth();

초기화 마지막 부분에서 패널의 너비를 올바르게 애니메이션 하기 위해 열린 패널의 너비를 알아내고 있다.

accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });

패널이 표시될때 한번에 확 나타나게 하기보다는 animate 함수가 너비를 늘릴 수 있도록 하기 위해 우선 너비를 0으로 설정 해야 하는데 이를 위해 $open 변수에 대한 역필터인 :not(:first) 필터를 사용 한다.
첫 번째를 제외한 패널의 집합을 얻은 다음 그들을 초기화 하도록 CSS 속성을 변경 하고 있다. 

그리고 마지막으로 클릭 처리기의 $open 변수는 패널이므로 앞쪽의 <h3>요소로 이동하기 위해서 .prev()를 사용하며 그요소가 클릭된 요소의 현재 컨텍스트와 일치하는지도 검사한다. 왜냐하면 현재 열려있는 패널과 동일할 경우에 아무것도 하지 않게 하는 것이다.

7.5 순차적인 효과 적용하기
문제점
 - 어떤 요소집합에서 효과가 발생하고 난 후에 또 다른 효과가 다른 요소집합에서 발생

해결 방법
 

 $(document).ready(function () {
    var $boxes = $('.box').hide(),
      div = 0;
   
    $('#animate').click(function () {
      // manual method
      // $('.box:eq(0)').fadeIn('slow', function () {
      //   $('.box:eq(1)').slideDown('slow');
      // });
      $($boxes[div++] || []).fadeIn('slow', arguments.callee);
    });
  });


주석 처리 되어 있는 부분은 수동 콜백 방식이고 주석 처리가 되어있지 않은 부분은 자동 방식이다. 수동 콜백 방식은 이어지는 효과가 이전 효과가 다를경우에 사용되고 자동 방식은 수많은 요소에 대해 효과를 순차적으로 반복한다.

$($boxes[div++] || [])

이 코드는 인덱스 수를 증가시키면서, 만일 요소가 존재하지 않는다면 jQuery에 빈 배열을 전달 한다.

fadeIn('slow', arguments.callee);

arguments는 모든 함수가 접근할 수 있는 지역 변수를 참조하고 잇는 자바스크립트 내의 키워드다.
 
팁 - arguments.callee는 유용하지만 ECMAScript 5 명세에서 사용이 제한 될것으로 예상되어 가급적 사용을 자제하는 편이 좋다.

7.8 효과에 사용자 정의 이징 메서드 사용하기
 - jQuery는 swing과 linear라는 두개의 이징 함수를 내장 하고 있다. 기본은 swing이다.
   수동으로도 이징 함수를 추가 할수도 있자만 jquery.easing 플러그인을 사용 할수 도 있다,
  주소는 http://jqkuery-cookbook.com/go/easing에서 다운 가능하다.

해결방법
 - jQuery 라이브러리를 포함시킨 다음 이징 함수를 사용할 수 있다.


$(document).ready(function () {
    $('#animate').click(function () {
      $('.box').animate({ scrollTop: '+=100' }, { duration: 400, easing: 'easeOutElastic' });
    });
  });


이징 함수는 다섯 개의 매개변수를 갖는다.
fraction
 - 0(에니메이션 시작) 과 1(애니메이션 종료) 사이의 시간으로 계산되는 애니메이션의 현재 위치
elapsed
 - 애니메이션이 시작한 이후로부터 경과된 시간의 밀리초  (거의 사용되지 않음)
attrStart
 - 애니메이션되고 있는 CSS 어트리뷰트의 시작값
attrDelta
 - 애니메이션되고 있는 CSS 어트리뷰트의 시작값과 끝값 간의 차이
duration
 - 애니메이션이 지속되는 총 시간 밀리 초 ( 거의 사용되지 않음)

7.10 고급 효과를 위해 jQuery UI 사용하기

문제점
 -  효과는 어 떤 요소에 대해 수많은 css 속성을 애니메이션 할 필요가 있거나 또는 다이얼로그가 닫힐 때 특별한 방식으로 사라질 필요가 있을 때 

해결 방법
 - jQuery UI 라이브러를 사용할 수 있다.
  http://jquery-cookbook.com/go/jqueryui-download 에서 다운 

CSS

.big {
    font-size: 400%;
    width: 500px;
    height: 500px;
    line-height: 100%;
  }

jQuery


$(document).ready(function () {
    $('#animate').click(function () {
      $('.box').toggleClass('big', 2000);
    });
   
    $('#effect').click(function () {
      $('.box').effect('explode', null, 2000);
    });
  });


첫번째 예 제는 big 클래스를 추가하고 있으며 애니메이션은 2초 동안 실행되도록 설정하고 있다. .big 클래스에 있는 모든 CSS 속성들은 div.box요소 상에서 애니메이션이 수행된다.
toggleClass 메서드 또한 jQuery ui 에 의해 수정되었기 때문에 원래 상태로 왔다갔다 할수 있다. 

두번째 예제는 effect() 메서드를 사용하고 있는데 이는 jQuery UI 라이브러리에서 제공되는 것이다. explode 문자열을 사용하면 div.box는 9조각으로 분리된다. 






'jquery' 카테고리의 다른 글

1.5 DOM 요소의 래퍼 집합 필터링하기  (0) 2017.11.15
1.4 특정 컨텍스트 안에서 DOM 요소 선택하기  (0) 2017.11.15
1.2 Dom은 로드되었지만 페이자가 로드되기 전에 jQuery/자바스크립트 실행하기  (0) 2017.11.15
Chapter 5. 메뉴, 탭, 툴팁, 패널  (0) 2017.11.15

'jquery' Related Articles

티스토리툴바