가시성을 설정하는 jQuery .hide()와 같습니다. hidden

Question

jQuery에는 .hide() 및 .show() 개의 CSS display: none 설정 방법이 있습니다.

visibility: hidden 설정을 지정할 수있는 동일한 기능이 있습니까?

나는 .css()을 사용할 수 있다는 것을 알고 있지만, .hide() 정도의 기능을 선호합니다. 감사.

Answer 1

자신의 플러그인을 만들 수 있습니다.

jQuery.fn.visible = function() { 
    return this.css('visibility', 'visible'); 
}; 

jQuery.fn.invisible = function() { 
    return this.css('visibility', 'hidden'); 
}; 

jQuery.fn.visibilityToggle = function() { 
    return this.css('visibility', function(i, visibility) { 
     return (visibility == 'visible') ? 'hidden' : 'visible'; 
    }); 
}; 

당신은 내가하지 않는 것이 좋습니다 원래 jQuery를 toggle()을, 과부하하려면

...

!(function($) { 
    var toggle = $.fn.toggle; 
    $.fn.toggle = function() { 
     var args = $.makeArray(arguments), 
      lastArg = args.pop(); 

     if (lastArg == 'visibility') { 
      return this.visibilityToggle(); 
     } 

     return toggle.apply(this, arguments); 
    }; 
})(jQuery); 

jsFiddle.

Answer 2

를 내장 한이 아니라 당신은 당신의 자신의 아주 쉽게 작성할 수

(function($) { 
    $.fn.invisible = function() { 
     return this.each(function() { 
      $(this).css("visibility", "hidden"); 
     }); 
    }; 
    $.fn.visible = function() { 
     return this.each(function() { 
      $(this).css("visibility", "visible"); 
     }); 
    }; 
}(jQuery)); 

당신은 다음과 같이이를 호출 할 수

$("#someElem").invisible(); 
$("#someOther").visible(); 

을 여기 working example입니다.

Answer 3

visibility : hidden으로 숨기기의 표준 기능 만 있으면 현재 레이아웃을 유지하기 위해 hide의 콜백 기능을 사용하여 태그의 CSS를 변경할 수 있습니다. Hide docs in jquery

예 :

이

$('#subs_selection_box').fadeOut('slow', function() { 
     $(this).css({"visibility":"hidden"}); 
     $(this).css({"display":"block"}); 
}); 

이 사업부를 숨기기 위해 정상 멋진 애니메이션을 사용하지만 애니메이션 완료 후 숨겨진에 대한 가시성을 설정하고 차단하는 표시합니다.

예 :. http://jsfiddle.net/bTkKG/1/

에만 CSS를 사용하기 때문에 (난 당신이 $ ("# 금주 모임") CSS() 솔루션을 원하는 didnt가 알고 있지만 그것이 경우에 당신이 지정하지 않은) 방법 당신이 잃을 생기.

Answer 4

이 작업을 수행하는 더 간단한 방법은 당신이 당신의 자신의 기반을 구현할 수 있습니다 jQuery의 toggleClass() 방법

CSS

.newClass{visibility: hidden} 

HTML

<a href="#" class=trigger>Trigger Element </a> 
<div class="hidden_element">Some Content</div> 

JS

$(document).ready(function(){ 
    $(".trigger").click(function(){ 
     $(".hidden_element").toggleClass("newClass"); 
    }); 
});