제이쿼리 jQuery Effect

W3C 공부하러가기

jQuery Effect

hide, show, toggle

• hide() : HTML 요소를 숨긴다.

    $("selector").click(function(){
      $("selector").hide(speed,이벤트 콜백 함수)
    })
  

• show() : HTML 요소를 나타나게 한다.

    $("selector").click(function(){
      $("selector").show(speed,이벤트 콜백 함수)
    })
  

• toggle() : 위의 hide와 show effect를 반복한다.

  $("selector").click(function(){
    $("selector").toggle(speed,이벤트 콜백 함수)
  })
  

speed에는 숫자와 문자로 시간을 표현할 수 있다. (1000, 1ms, 1s, “slow”, “fast” …)

Fading

• fadeIn() : 선택한 HTML 요소가 서서히 나타난다.

$("selector").fadeIn(speed)

• fadeOut() : 선택한 HTML 요소가 서서히 사라진다.

$("selector").fadeOut(speed)

• fadeToggle() : 선택한 HTML 요소가 서서히 나타났다 사라지는 것을 반복한다.

$("selector").fadeToggle(speed)

• fadeTo() : 선택한 HTML 요소가 불투명하게 사라지게 할 수 있다. 불투명도는 0-1사이로 조절한다.

$("selector").fadeTo(speed, opacity)

silding

• slideDown() : 선택한 HTML 요소가 아래로 슬라이딩한다.

$("selector").slideDown(speed)

• slideUp() : 선택한 HTML 요소가 위로 슬라이딩한다.

$("selector").slideUp(speed)

• slideToggle() : 선택한 HTML 요소의 슬라이드가 반복된다.

$("selector").slideToggle(speed)

animate

• animate() : 선택한 HTML 요소가 움직인다.

$("selector").animate({parameter}, speed, 작동할 함수)

parameter에는 css 속성을 넣을 수 있다. css속성이 대쉬(-)로 이어져 있으면 카멜 케이스Camel Case로 작성하면 적용된다. 색상 css는 jQuery 라이브러리를 다운받아야 한다. 속성값에는 ‘‘따옴표를 붙여야 한다. (전체가 ““큰 따옴표로 덮여 있기 때문에)

animate로 요소를 움직이고 싶으면 해당 요소에 position이 설정되어 있어야 한다.

stop

• stop() : 움직이던 HTML 요소를 멈추게 할 수 있다.

$("selector").stop()

stop() 메소드는 현재 수행되는 animation을 멈추는데 주로 사용되어 중복해서 사용하기도 한다.

$("selector").stop().slideDown()