제이쿼리 토글(toggle) 페이드 드롭다운 메소드

JS에서 classList.toggle처럼 제이쿼리에서도 toggle이 존재한다.

JS보다 더 간편하게 사용할 수 있다.

 

사용법

()안에 'fast', 'slow' 혹은 시간초(초당 1000)를 지정할 수 있다.

 

기본 : 400ms

fast : 200ms

slow : 600ms

 

 

1. 서서히 보이고 사라지는 메소드

$('.btn').on('click', function(){
    $('.hello').fadeOut();
  });

 

.fadeIn() : 실행시 숨겨진 요소를 나타나게 한다.
.fadeOut() : 실행시 요소를 사라지게 한다.

 

.fadeToggle()

$('.navbar-toggler').on('click', function(){
    $('.list-group').fadeToggle();
})

fadeToggle()로 편하게 서서히 보이고 사라지는 코드이다.

요소가 있으면 사라지게 하고 없으면 나타나게 한다.

 

 

.fadeTo()

$(function() {

    $("#fadeBtn").on("click", function() {
        // id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.
        $("#divBox_01").fadeTo(2000, 0.2);
        
        // id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.
        $("#divBox_02").fadeTo(2000, 0.5);
        
        // id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.
        $("#divBox_03").fadeTo(2000, 0.8);

    });

});

.fadeTo() : fade 효과에서 사용하는 opacity 속성값을 직접 설정한다.

fadeTo() 실행 결과

 

complete

지정한 함수가 사라진 다음 해당 함수를 실행한다.

 

.fadeToggle( function() {
  // function
} )

 

 

 

2. 드롭다운 메소드

.slideUp() 은 줄어들며 사라지게 만들어줍니다. 

.slideDown() 늘어나며 부드럽게 보여준다.

 

드롭다운에서도 토글을 이용하면 더욱 편해진다.

 

.slideToggle()

$('.navbar-toggler').on('click', function(){
    $('.list-group').slideToggle();
})

해당 코드는 일일히 업다운할 필요없이 토글로 간편하게

드롭다운이 접혀지고 펼쳐기는 코드이다.

 

.slideToggle()로 쉽게 드롭다운을 구현할 수 있다.