可視性を設定する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

は内蔵の1ありませんが、あなたはあなた自身の非常に簡単に書くことができます：

(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の標準機能のみが必要な場合は、hideのコールバック関数を使用してタグの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/

のみCSSを使用しているので（私はあなたが$（「＃のAA」）、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"); 
    }); 
});