WEB/jQuery

jQuery Animation

p3chaeyeon 2024. 8. 28. 21:00

slideUp(), slideDown(), slideToggle()

  • 반드시 <img> 태그에 width, height 속성을 주어야 한다
  • 그렇지 않으면 toggle()와 똑같은 동작을 한다
  • slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다
    • speed : "slow" or "fast" or milliseconds(1/1000초)

 

⚒️ 예제

// jQuery\webapp\05_jQueryAnimation
exam01.html slideUp, slideDown, slideToggle, toggle, fadeIn, fadeOut

 


 

this / $(this)

$('#sh > input').not(this).removeClass('btn');

 

this $(this)
자바스크립트 제이쿼리 문법
해당 이벤트가 발생한 요소를 표시 이벤트가 발생하면 발생한 태그를 Object로 보여준다

 

this와 같은 데이터를 갖기 위해서는 $(this)[0] 을 사용하면 된다

this === $(this)[0]

 

① console.log(this); 결과

<input type="button" value="보이기" class="btn">

 

② console.log($(this)); 결과

▼ S.fn.init [input]
▶ 0: input.btn 
length: 1 
▶ [[Prototype]]: Object(0)

 

 

⚒️ 예제

// jQuery\webapp\05_jQueryAnimation
exam02.html show/hide
exam03.html modal
exam04.html show/hid
exam05.html animate()