相當於jQuery .hide（）設置可見性：隱藏

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

如果您只需要隱藏標準功能，只隱藏可見性：隱藏以保持當前佈局，您可以使用隱藏的回調函數來更改標籤中的CSS。 Hide docs in jquery

一個例子：

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

這將使用普通的酷動畫隱藏DIV，但動畫結束後，你設置的知名度，隱藏和顯示阻攔。

一個例子：http://jsfiddle.net/bTkKG/1/

我知道你沒有想要的$（「＃AA」），CSS（）的解決方案，但你並沒有規定這是因爲只使用CSS（）方法，你失去了動畫。

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"); 
    }); 
});