दृश्यता सेट करने के लिए jQuery .hide() के समतुल्य: छुपा

Question

jQuery में, .hide() और .show() विधियां हैं जो सीएसएस 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

यदि आपको केवल दृश्यता के साथ छिपाने की मानक कार्यक्षमता की आवश्यकता है: वर्तमान लेआउट को रखने के लिए छुपाएं आप टैग में सीएसएस को बदलने के लिए छुपा के कॉलबैक फ़ंक्शन का उपयोग कर सकते हैं। Hide docs in jquery

एक उदाहरण:

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

इस div को छिपाने के लिए सामान्य शांत एनीमेशन का उपयोग होगा, लेकिन एनीमेशन खत्म करने के बाद आप छिपा के लिए दृश्यता सेट और ब्लॉक करने के लिए प्रदर्शित करते हैं।

एक उदाहरण:। http://jsfiddle.net/bTkKG/1/

मुझे पता है तुम फ्लॉप चाहते $ ("# आ") सीएसएस() समाधान, लेकिन अगर यह था आप निर्दिष्ट नहीं किया है, क्योंकि केवल सीएसएस का उपयोग कर() विधि तुम हार एनीमेशन।

Answer 4

यह करने के लिए एक और भी आसान तरीका jQuery के toggleClass() विधि

सीएसएस

.newClass{visibility: hidden} 

एचटीएमएल

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

जे एस

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