본문 바로가기
프로그래밍 공부/jQuery

jQuery - 효과

신입사원 최종원 2019. 12. 30. 14:40

jQuery 라이브러리를 이용한 움직임 효과에 관한 내용들이다. 

메서드 이름 설명
show() 문서 객체를 크게 확대하며 보여준다.
hide() 문서 객체를 작게 축소하며 사라지게 한다.
toggle() show() 메서드와 hide() 메서드를 번갈아 실행한다.
slideDown() 문서 객체를 슬라이드 효과와 함께 보여준다.
slideUp() 문서 객체를 슬라이드 효과와 함께 사라지게 한다.
slideToggle() slideDown() 메서드와 slideUp() 메서드를 번갈아 실행한다.
fadeIn() 문서 객체를 선명하게 보여준다.
fadeout() 문서 객체를 흐릿하게 사라지게 한다.
fadeToggle() fadeIn() 메서드와 fadeout() 메서드를 번갈아 실행한다.
animate() 사용자 지정 효과를 생성한다.

기본 시각 효과는 show() 메서드() 부터 fadeToggle() 메서드 까지를 의미한다. 이들은 아래와 같은 형태로 사용한다.

1. $(selector).method();
2. $(selector).method(speed);
3. $(selector).method(speed, callback);
4. $(selector).method(speed, easing, callback);

각각의 매개변수는 다음과 같은 의미를 가지고있다.

1. speed
     - 효과를 진행할 속도를 지정한다.
     - 밀리 초 단위의 숫자 또는 문자열 slow, normal, fast를 입력한다.
2. callback
     - 효과를 모두 완료하고 실행할 함수를 지정한다.
3. easing
     - 애니메이션의 easing 형태를 지정한다.
     - 별도의 플러그인을 사용하지 않으면 문자열 linear와 swing만 입력 가능하다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          $(document).ready(function(){
               $("button").click(function(){
                    $("div.page").toggle('fast')
               })
          })
     </script>
</head>
<body>
     <button>Click this!</button>
     <div class="page">
           <h1>Lorem ipsum</h1>
           <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et ut quisquam 
           officiis nesciunt magnam possimus praesentium aspernatur, nemo aut 
           cupiditate iure, necessitatibus optio, debitis fugit vel ipsum inventore unde 
           temporibus.
           </p>
     </div>
</body>
</html>

실행을 하게되면 <button>태그를 누르게되면 아래의 <div> 태그가 사라지고 한번 더 누르면 보여진다. toggle() 메서드 외에도 slideToggle() 메서드나 fadeToggle() 메서드도 사용가능하다. 기능은 서로 같지만 시각적 효과가 다르다.

다음은 사용자 정의 효과에 대한 내용이다. 아까 살펴본 표에서 맨 아래에 있던 animate() 메서드를 이용한 것이다. 이것은 조금 더 개발자가 원하는 방향으로 효과를 만들고 싶을 때 사용하며, 네 가지의 형태가 존재한다.

1. $(selector).animate(object);
2. $(selector).animate(object, speed);
3. $(selector).animate(object, speed, easing);
4. $(selector).animate(object, speed, easing, callback);

animate() 메서드에서 첫번째 매개변수에 들어갈 수 있는 것은 객체를 제외하면 시각 효과 메서드와 같은 매개변수도 입력할 수 있다. 입력 가능한 속성은 아래와 같다.

- opacity
- height
- top
- width
- left
- margin
- right
- padding
- bottom

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <style>
          div { width: 100px; height: 100px; background-color: blue; }
     </style>
     <script>
          $(document).ready(function(){
               $('div').click(function(){
                    $(this).animate({
                         width: 300,
                         height: 300
                    }, 3*1000);
               });
          })
     </script>
</head>
<body>
     <div></div>
</body>
</html>

크기가 100x100인 <div> 태그 영역을 클릭시 3초(3000 밀리 초)에 걸쳐서 크기가 300x300로 늘어나는 효과를 적용한 코드이다. 한가지 주의해야 할 점이 있는데, 만약 효과로 위치 속성(left, right, top, bottom 등)을 변경하는 animate() 메서드를 사용하려면 <style> 태그의 대상이 될 태그의 position 스타일 속성이 absolute나 relative여야 한다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <style>
          div {
               width: 50px; height: 50px;
               background-color: brown;
               position: relative;
          }
     </style>
     <script>
          $(document).ready(function(){
               $('div').click(function(){
                    $(this).clearQueue()
                    $(this).animate({
                         left: '+=60'
                    }, 2000).animate({
                         width: '+=60'
                    }, 2000).animate({
                         height: '+=60'
                    }, 2000);
               });
          })
     </script>
</head>
<body>
     <div></div>
</body>
</html>

위의 코드 처럼 position 스타일을 relative(또는 absolute)로 지정해주어야 한다. 또한 위의 코드는 상대적 애니메이션이 적용된 것이며, 이것은 현재 상태에서 상대적으로 애니메이션을 적용하는 것이다. 누르면 현재 크기를 기준으로 왼쪽으로 60px, 다음으로 width가 60px 마지막으로 높이가 60px 만큼 차례대로 변화하고,  한번더 클릭하면 그 상태부터 차례대로 모양이 변한다.

jQuery의 효과 메서드는 계속 누적이 되는 특징 있다. 따라서 위의 코드를 실행해 <div> 태그 영역을 3번 연속으로 클릭을 하면 처음 실행이 되고 연속으로 2번 더 실행이 되는데, 이것은 누적된 효과 명령이 큐(queue)에 누적이 되어서 그런 것이다. 따라서 한번 변화가 실행이 되고 다시 클릭하기 전까지 변화가 실행이 되지 않게 하려면 큐의 내용을 제거하는 메서드가 필요한데, 이것이 위에 있는 붉은 색으로 표시한 .clearQueue() 메서드 이다.

.clearQueue() 메서드에는 애니메이션을 정지하는 기능은 없다. 애니메이션을 정지하려면 stop() 메서드를 이용해야 한다. stop() 메서드는 세 가지 형태가 있다.

1. $(selector).stop();
2. $(selector).stop(clearQueue);
3. $(selector).stop(clearQueue, goToEnd);

매개변수로 들어가는 clearQueue와 goToEnd는 boolean 자료형을 이용한다. 입력하지 않으면 자동으로 false로 인식을 한다. clearQueue 매개변수를 true로 하면 clearQueue() 메서드를 실행하는 것과 같은 효과를 가진다. 두 번째의 goToEnd 매개변수를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈추게 된다.

<script>
     $(document).ready(function(){
          $('div').click(function(){
               $(this).stop(true, true)
               $(this).animate({
                    left: '+=60',
                    width: '+=60',
                    height: '+=60'
               }, 2000);
          });
     })
</script>

위와 같은 방법으로 사용한다. 이외에도 delay() 메서드도 존재하는데 매개변수로 밀리 초 단위를 입력한다. 효과로는 큐에 있는 명령을 매개변수만큼 잠시 중단 시킨다. clearQueue() 메서드 부터 여기까지 알아본 내용을 정리하면 아래와 같다.

메서드 이름 설명
clearQueue() 큐(Queue)의 내용을 제거한다.
stop() 효과 및 애니메이션을 정지한다.
delay() 큐(Queue)에 있는 명령을 잠시 중단한다.

효과.html
0.00MB

 

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

jQuery - 이미지 슬라이더  (0) 2019.12.31
jQuery - 캔버스 애니메이션을 위한 틀  (0) 2019.12.30
jQuery - 이벤트 下  (0) 2019.12.27
jQuery - 이벤트 上  (0) 2019.12.27
jQuery - 문서 객체 조작  (0) 2019.12.24

'프로그래밍 공부/jQuery' Related Articles

티스토리툴바