본문 바로가기

javascript

js13_effect

<script>
  /* jQuery Effect

  A. effect method

  show() : 문서객체를 보이게 하기
  hide() : 문서객체를 보이게 하기
  toggle() : show() hide() 번갈아 수행
  slidedown() : 슬라이드 효과 보이기
  slideup() : 슬라이드 효과 감추기
  slidetoggle() : slidedown, slideup 번갈아 수행
  fadein(): 서서히 보이기
  fadeOut() : 서서히 감추기
  fadeToggle() : fadein, fadeout 번갈아 수행

  B. effect 메서드 4가지 형태
 
  1. $(선택자).method()
  2. $(선택자).method(speed) : slow, normal, fast, 숫자(ms)
  3. $(선택자).method(speed, 콜백함수) : 효과가 수행되는 동안 수행할
  함수(callback 함수)를 지정, 함수수행 결과가 리턴
     
  4. $(선택자).method(speed, easing, 콜백함수) : easing 애니메이션효과 적용

  */

 $(function(){
  $('button').click(()=>{
    $('.page').slideToggle(1000,() => alert('toggle'));
  })
 })
</script>
</head>
<body>
  <button>jQuery Effect - toggle</button>
  <div class="page">
    <h1>
      <p>dd</p>
    </h1>
  </div>
 
</body>

<style>
*{
  margin:0;
  padding:0;
}
#box{
  background: mediumaquamarine;
  width: 100px;
  height: 100px;
  position: absolute;
}
</style>
<script>
  /* jQuery Animation
  A. 매서드 형태
 
  1. $().animate(object)
  2. $().animate(object, speed)
  3. $().animate(object, speed, easing)
  4. $().animate(object, speed, easing, callback 함수)
 
  B. animation의 형태

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

  C. 정지메서드
  1. $().stop()
  2. $().stop(clearQueue)
  3. $().stop(clearQueue, goToEnd)
  */
 $(function(){
  $('button').click(()=>{
    $('div').animate({
      left: '250px',
      opacity: '0.5',
      height: '+=150px',
      width: '+=150px',
      height: 'toggle',
      width: 'toggle',

    })
  })
    //anaimation 효과는 누적처리
    $('#box').click(function(){
      $(this).animate({height:'300px', opacity:'0.5'}, 'slow')
      $(this).animate({width:'300px', opacity:'0.5'}, 'slow')
      $(this).animate({width:'100px', opacity:'0.5'}, 'slow')
      $(this).animate({width:'100px', opacity:'0.5'}, 'slow')
    })
 })
</script>
</head>
<body>
  <button>스타트 애니</button>
  <div id="box"></div>
</body>

'javascript' 카테고리의 다른 글

js14_jQuery_ui  (0) 2023.06.19
js12_events  (0) 2023.06.01
js11_Query  (0) 2023.06.01
js10_exception  (0) 2023.06.01
js09_builtin  (0) 2023.06.01