시각적 효과

1. 기본적인 시각적 효과
  
  *show() / hide()
   toggle()  => show() / hide()를 번갈아 실행
   slideDown() / slideUp()
   slideToggle() => slideDown() / slideUp()를 번갈아 실행
   fadeIn() / fadeOut()
   fadeToggle() => fadeIn() / fadeOut()를 번갈아 실행

 

  *네가지 형식으로 사용.
   $(selector).method();
   $(selector).method(speed);
   $(selector).method(speed, callback); callback => function(){} - 애니메이션이 모두 계산된 직 후 처리되는 함수
   $(selector).method(speed, easing, callback);

 

   -speed  => slow/normal/fast
   -callback => 효과를 모두 완료 후에 실행할 함수를 지정
   -easing => 애니메이션의 easing 속성을 지정

---

2. 사용자 지정 효과  animate( { } )메소드

     *$(selector).animate(object);
      $(selector).animate(object, speed);
      $(selector).animate(object, speed, callback);
      $(selector).animate(object, speed, easing, callback);

     *사용 가능한 속성
      top, left, right, bottom => 위치변화(css로 position 적용되어 있어야함 .)

      width, height => 크기조절

      opacity => 투명도

      margin, padding => 여백조절

 

animiate 메서드 사용후 .clearQueue() 사용필수