Research on Equivalent Implementation of visibility: hidden in jQuery

Introduction

In web front-end development, element visibility control is a fundamental and important functionality. jQuery, as a widely used JavaScript library, provides .hide() and .show() methods to control element display and hiding, but these methods default to using the display: none property. However, in actual development, we sometimes need to use visibility: hidden to hide elements while preserving their placeholder space in the document flow.

Difference Analysis Between visibility and display

Although both visibility: hidden and display: none can hide elements, they have essential differences. The former only makes elements invisible but still occupies layout space; the latter completely removes elements from the document flow, occupying no space. This difference is particularly important in scenarios requiring layout stability.

According to the detailed description of the .hide() method in Reference Article 2, this method achieves hiding functionality by setting display: none and saving the original display value. Although this mechanism is efficient, it cannot meet the needs of all usage scenarios.

Custom Plugin Implementation Methods

Based on the best answer in the Q&A data, we can implement visibility-related functionality by extending the jQuery prototype chain. Here is the complete implementation code:

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

This implementation approach has the following advantages:

• Method chaining: Returns jQuery objects, supporting subsequent operations
• State awareness: The visibilityToggle method can intelligently switch based on current state
• Good compatibility: Based on standard CSS properties, suitable for all modern browsers

Advanced Extension: Overloading the toggle Method

For situations requiring more complex control, consider overloading jQuery's native toggle method. However, it should be noted that this approach may cause compatibility issues and should be used cautiously:

!(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);

Practical Application Scenario Analysis

The Adobe Animate scenario mentioned in Reference Article 1 demonstrates special applications of visibility control. In certain frameworks or environments, directly manipulating style properties might be a more reliable choice:

$("#myComponentName")[0].style.visibility = "hidden";

This method bypasses jQuery's encapsulation and directly manipulates the DOM element's style property, offering better compatibility in certain special environments.

Performance Optimization and Best Practices

When choosing visibility control methods, performance factors need to be considered:

• Batch operations: Use jQuery selectors for batch processing when multiple elements need to be operated on
• Cache results: Cache jQuery objects during frequent operations
• Avoid excessive overloading: Carefully modify native methods to avoid affecting other code

Conclusion

Through custom jQuery plugins, we can effectively implement visibility: hidden functionality to meet needs in different scenarios. This approach maintains jQuery's concise syntax while providing flexible extensibility. In actual development, appropriate implementation methods should be chosen based on specific requirements, balancing functional needs with performance considerations.