애니메이션

기본 애니메이션 효과

 

• 나타나고 사라지는 효과
  - 태그를 숨겼다가 보였다 하는 메소드
  - show()는 보이고, hide()는 사라진다.
  - hide() 메서드는 스타일 속성 중 width와 height 그리고 opactiy 값을 이용해 요소의 크기를 부드럽게, 작게 만듬과 동시에 투명하게 만들어 화면에서 보이지 않게 만드는 기능을 구현하는 메서드이다.
    (애니메이션이 끝난 후 display 속성 값을 none으로 만들어 주면 화면에서 보이지 않을 뿐 대상 요소가 삭제되거나 하진 않습니다.)
  - show() 메서드는 hide() 메서드의 반대로 숨겨져 있던 대상 요소의 크기와 투명도 값을 부드럽게 원래대로 만들어 준다.
    (애니메이션이 끝난 후 display 속성값 역시 원래 값으로 복원시켜 준다.)
  - toggle()은 보이는 상태에서는 사라지게 하고, 사라진 상태에서는 보이게 한다.
  - 단위는 1/1000초이다.
  

  $대상.show()
  $대상.show([duration] [, complete])
  $대상.show(duration[, easing] [, complete])
  $대상.show([options])
  $대상.hide()
  $대상.hide([duration] [, complete])
  $대상.hide(duration[, easing] [, complete])
  $대상.hide([options])

   <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(function(){
        $('#show').click(function(){
          // $('img').css({display:'block'})
          $('img').show(1000)
        })
  
        $('#hide').click(function(){
          $('img').hide(1000)
        })
  
        $('#toggle').click(function(){
          $('img').toggle()
        })
  
      })
    </script>

• 슬라이드 업/다운 효과
  - 슬라이드 쇼가 올라가고 내려가는 효과를 보이는 메소드
  - slideDown()은 슬라이드 쇼가 내려가듯 태그가 나타난다.
  - slideUp()은 슬라이드 쇼가 올라가는 효과를 보이며 태그가 사라진다.
  - slideToggle()은 두 상태를 전환한다.
  - 기본 속도는 400ms이다.
  

  $대상.slideUp()
  $대상.slideUp([duration] [, complete])
  $대상.slideUp(duration[, easing] [, complete])
  $대상.slideUp([options])
  $대상.slideDown()
  $대상.slideDown([duration] [, complete])
  $대상.slideDown(duration[, easing] [, complete])
  $대상.slideDown([options])

   <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(function(){
        $('#slideDown').click(function(){
          $('img').slideDown()
        })
  
        $('#slideUp').click(function(){
          $('img').slideUp()
        })
  
        $('#slideToggle').click(function(){
          $('img').slideToggle()
        })
      })
    </script>

• 페이드 인/아웃 효과
  - 나타남과 사라짐에 투명도를 주는 메소드
  - fadeIn()은 서서히 태그가 나타난다.
  - fadeOut()은 서서히 태그가 사라진다.
  - fadeToggle()은 두 상태를 전환한다.

  $대상.fadeIn()
  $대상.fadeIn([duration] [, complete])
  $대상.fadeIn(duration[, easing] [, complete])
  $대상.fadeIn([options])
  $대상.fadeOut()
  $대상.fadeOut([duration] [, complete])
  $대상.fadeOut(duration[, easing] [, complete])
  $대상.fadeOut([options])

   <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(function(){
        $('#fadeIn').click(function(){
          $('img').fadeIn()
        })
  
        $('#fadeOut').click(function(){
          $('img').fadeOut()
        })
  
        $('#fadeToggle').click(function(){
          $('img').fadeToggle()
        })
      })
    </script>​

cf) delay() 메소드
       - delay() 메소드를 활용하여 animation 사이에 delay를 줄 수 있다.

 

애니메이션 효과 만들기

 

$대상.animate(properties, options)
$대상.animate(properties[,duration][,easing][,complete])

• 매개변수
  

  이름	설명
  properties	애니메이션을 적용할 CSS 스타일 속성과 값이 담길 객체이다.
  duration	효과가 지속될 시간 값(duration)이다. 단위는 밀리초이며 기본값은 400ms이다. 문자열(slow, normal, fast)도 사용한다.
  easing	사용할 이징(easing) 함수 이름이다. easing 함수는 움직임을 구현한 함수이다.
  complete	효과가 완료됐을 때 호출할 콜백 함수이다.
  options	duration, easing, complete 매개변수를 하나의 객체로 묶어 간결하게 매개변수를 전달할 수 있다. 또한 기본적인 매개변수 값 이외에 좀 더 다양한 값을 설정할 때 사용한다.

 

cf) 콜백함수
     : 현재 명령어가 끝난 뒤에 다음 함수를 실행한다.

 

애니메이션 속성

 

• .animate( )
  - swing(기본값) : 느림 → 빠름 → 느림
  - linear : 일정한 속도
  

  <script src="js/jquery-3.6.0.js"></script>
  <script>
  	$(function(){
  		// swing(기본값) / linear
  		$('.box1').animate({marginLeft:500}, 3000, 'swing')
  		$('.box2').animate({
  			marginLeft:500,
  			width:300,
  			height:300
  		}, 3000, 'linear')
  		})
  </script>

• setInterval( )
  - n초에 한 번씩 반복 실행하도록 설정
  

  <script src="js/jquery-3.6.0.js"></script>
  <script>
      $(function(){
          function ani(){
              $('.box').animate({marginLeft:500}, 1000, function(){
                  $('.box').delay(1000).animate({marginLeft:10}, 1000)
              })
          }
          /*
          setInterval(function(){
              ani()
          }, 3000) // 3초 뒤에 3초마다 실행
          */
  
          setInterval(ani, 3000)
  
          ani() // 페이지가 시작되면 1번 실행 (페이지 열자마자 실행)
  
      })
  </script>

• clearInterval( )
  - 설정된 setInterval을 지울 때 사용
  

  <script src="js/jquery-3.6.0.js"></script>
  <script>
      $(function(){
          function ani(){
              $('.box').animate({marginLeft:500},1000, function(){
                  $(this).delay(1000).animate({marginLeft:10},1000)
              })
          }
          var rolling = setInterval(ani,3000)
          ani()
  
          $('.stop').click(function(){
              clearInterval(rolling)
          })
  
          $('.play').click(function(){
              rolling = setInterval(ani, 3000)
              ani()
          })
  
      })
  </script>​

 

애니메이션 효과 멈추기

 

$대상.stop()

• if문을 활용한 애니메이션 효과 멈추기
  

  <script src="js/jquery-3.6.0.js"></script>
  <script>
      $(function(){
  
          $('.box').click(function(){
              if($('.box').width() == 200){
                  $('.box').animate({width:'95%'})
              }else{
                  $('.box').stop().animate({width:200})
              }
          })
      })
  </script>​

  - stop() 메서드를 활용하면 동작 중인 애니메이션 효과를 바로 멈출 수 있다.

 

width값 체크

 

<script src="js/jquery-3.6.0.js"></script>
<script>
    // box의 width를 체크하여 box에다가 표시
    $(function(){
        var box_w1 = $('.box').css('width')
        var box_w2 = $('.box').width()      

        $('.box').html(box_w1 + '<br>' + box_w2)
    })
</script>

• .css('width')
  - 문자형 데이터
  - 계산이 불가능하다.
• .width()
  - 숫자형 데이터
  - 계산이 필요한 경우 활용한다.