JQuery Effects

김빛나리·2020년 7월 5일
0

1. Hide/Show

  • .hide()
  • .show()
  • .toggle()
    • hide, show 같이 하는 것
  • 괄호안에 숫자 쓸 수 있음 -> 이 숫자는 hide나 show할 때 걸리는 시간을 의미
    • (1000) = 1초

2. Fade

  • .fadeIn()
  • .fadeOut()
  • .fadeToggle()
  • .fadeTo()
    • 투명도 조절
    • ("slow", 0.4)
  • 괄호 안에 "slow", "fast", milliseconds 가능

3. Slide

  • slideDown()
  • slideUp()
  • slideToggle()

4. Animate

  • .animate({left: '250px'});
  • .animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px' });
  • fontSize도 가능
  • height: 'toggle'
    • 높이가 sliceUp했다가 Down했다가 함
    • 'show', 'hide', 'toggle' 사용가능

5. Stop

  • .stop()

6. Chaining

  • $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
  • 한번에 여러개 사용 가능

참고: https://www.w3schools.com/jquery/jquery_hide_show.asp

0개의 댓글