[펌]jQuery in Action 정리 5장 - 애니메이션과 여러 효과를 이용해 페이지 꾸미기

5.1 엘리먼트를 나타내고 감추기

5.1.1 접을 수 있는 리스트 구현하기

• show(), hide()

5.1.2 엘리먼트의 표시 상태 바꾸기

• toggle()

5.2 엘리먼트 표시상태를 애니메이션으로 표현하기

5.2.1 엘리먼트를 점진적으로 보이고 감추기

• hide(speed, callback) - 매개변수 없으면 display 스타일 프로퍼티 값이 즉시 none으로 설정, speed 는 1/1000초 설정, 또는 slow, normal, fast
• show(speed, callback) - jQuery를 이용해 감췄다면 이전 값으로 설정한다. 그렇지 않으면 block으로 설정
• toggle(speed, callback) - 감춰진 경우는 show()를 수행, 드러난 경우는 hide()를 수행

5.2.2 엘리먼트 페이드인 / 페이드 아웃/ 페이드 투하기

• fadeOut(speed, callback) - 불투명도를 0%로 줄여가면서 화면에서 제거
• fadeIn(speed, callback)
• fadeTo(speed, opacity, callback) - 확장엘리먼트의 불투명도를 현재의 설정 값에서 opacity 매개변수 값으로 설정 한다. (0.0~1.0) 화면에서 제거하지는 않는다.

5.2.3 슬라이드 효과를 사용하여 엘리먼트를 나타내고 감추기

• slideDown(speed, callback) - 감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다. (펼쳐지는...)
• slideUp(speed, callback) - 드러나 있는 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.
• slideToggle(speed, callback) - 감춰진 확장엘리먼트는 slideDown()을, 드러나 있는 확장 엘리먼트에는 slideUp()을 수행한다.

5.2.4 애니메이션 멈추기

• stop() - 확장 집합에 있는 엘리먼트에 현재 진행하는 에니메이션을 중지한다.

5.3 사용자 정의 애니메이션 생성하기

• 자신만의 애니메이션을 만들 수 있다.
• animate(properties, duration, easing, callback)
• animate(properties, options)

5.3.1 사용자 정의 스케일 애니메이션

• $('.animateMe').each(function(){

    $(this).animate(

        {

            widh: $(this).width() * 2,

            height: $(this).height() * 2

        },

        2000

   );

});

5.3.2 사용자 정의 드롭 애니메이션

• $('.animateMe').each(function(){

               $(this)

                  .css('position', 'relative')

                  .animate(

                       {

                            opacity: 0,

                            top: $(window).height() - $(this).height() - $(this).position().top

                        },

                        'slow',

                        function(){ $(this).hide(); });

           }); - 화면에서 떨어지는 효과

 

5.3.3 사용자 정의 퍼프 애니메이션

• 담배 연기 같이 공중에 퍼지는 것처럼 보이게 하려고 한다.
• $('.animateMe').each(function(){

    var position = $(this).position();

    $(this)

        .css({position:'absolute', top:position.top, left:position.left})

        .animate(

              {

                   opacity: 'hide',

                   width: $(this).width() * 5,

                   height: $(this).height() * 5,

                   top: position.top - ($(this).height() * 5 / 2 ),

                   left: position.left - ($(this).width() * 5 / 2)

              },

              'normal');

});