[JQuery] 제이쿼리 메서드(effect)

메서드 종류

• effect
  • fadeIn
  • fadeOut
  • slideUp
  • slideDown
  • show
  • hide

    <h1 class="button">button</h1>
    <div class="box"></div>

 

.box{
    background-color: red;
    width: 100px;
    height: 100px;
    display: none;
}

 

$('.button').click(function(){
    $('.box').fadeToggle(3000)
})

01

결과

최초의 button 아래는 아무것도 없지만, 클릭을 하게 되면 빨간 박스가 생성되는 것을 확인할 수 있다. 그 이유는 자바 스크립트에서 fadeToggle 메서드를 사용했기 때문인데, 전체적으로 해석을 해보자면,. button을 클릭했을 경우. box가 fadeToggle을 3초 이내로 된다는 뜻이다 메서드에 괄호에는 얼마나 빠르게 할 것인지 옵션이 들어가며 숫자로 넣을 경우 밀리세컨드, 문자로 하면 fast, slow로 줄 수 있다 문자로 할 경우 작은 다운표를 넣어줘야 되고, 괄호에 아무것도 넣지 않아도 된다. 다른 메서드를 사용할 경우 자바 스크립트에서 매소드 이름면 변경 시켜주면 된다.