jQuery addClass hidden-xs with transition

Question

id가 "m"인 div가 있고 그 가시성을 토글하고 싶지만 다른 크기의 경우 부트 스트랩 xs에만 표시하고 싶습니다.

id가 "mf"인 다른 div를 클릭 할 때 div에서 hidden-xs 클래스를 추가하고 제거하는 작업을 수행 한 후이 작업은 수행되지만 어쨌든 전환이 원활하게 이루어 지도록 찾을 수 없습니다. 나는 웹킷과 모즈 전환을 추가하려고 시도했다. 나는 fadeIn과 fadeOut를 시도했지만 아무 것도 전환을 제공하지 않는다. 내 코드와 제안을 heres한다?

$('#mf').click(function(event){ 
    event.preventDefault(); 
    if ($('#m').hasClass('hidden-xs')){ 
    $('#m').removeClass('hidden-xs'); 
    }else{ 
    $('#m').addClass('hidden-xs'); 
    } 
}); 

Answer 1

JQuery와도 있었다 요소가 이미 그것을 가지고하지 않고 요소를 가지고있는 경우 제거 할 경우 클래스를 추가하는 method.toggleClass(). 어쩌면 도움이 될지도 모른다. 업데이트 : CSS 전환 그것이 display: none하고 display는 애니메이션되지 않습니다 추가하는 CSS로 hidden-xs 작동하지 않습니다, 당신이 작성해야합니다 그것은 또한 당신에게 몇 줄을 절약 할 수, 함수는

$('#mf').click(function(event){ 
    event.preventDefault(); 
    $('#m').toggleClass('hidden-xs'); 
}); 

이 수정 될 수있다 자신의 클래스가있는 미디어 쿼리를 사용하고 요소를 숨기려면 opacity 또는 visibility을 사용하십시오. 당신의 CSS에 대한이 같은

뭔가 :

#m { 
     -o-transition: 1s ease; 
     -ms-transition: 1s ease; 
     -moz-transition: 1s ease; 
     -webkit-transition: 1s ease; 
     transition: 1s ease; 
    } 
@media (max-width: 767px) { 
    .custom-hidden-xs { 
     visibility: hidden; 
    } 
} 

이 당신의 JS에 대한 :

$('#mf').click(function(event){ 
    event.preventDefault(); 
    $('#m').toggleClass('custom-hidden-xs'); 
});