jQuery Effects - Hide and Show

jQuery, a versatile JavaScript library, offers a range of effects that enhance user experience on web pages. Among these effects are "Hide" and "Show," fundamental dynamics that impart an element's visibility. Accompanying these effects is the utility of the toggle() method, which acts as a switch, altering the visibility state of an element between hidden and displayed.

The "Hide" effect triggers the gradual disappearance of an element from the user's view, achieved through the gradual reduction of opacity and space occupied by the element. Conversely, the "Show" effect triggers the gradual emergence of a concealed element into the user's view, marked by a gradual increase in opacity and expansion of the element's space on the page.

$("#btnHide").click(function(){ $("p").hide(); }); $("#btnShow").click(function(){ $("p").show(); });
<p>Click "Hide Message" !!</p> <button id="btnHide">Hide Message </button> <button id="btnShow">Show Message</button>
run this source code Browser View

Click "Hide Message" !!

Full Source
<html> <head> <title>jQuery Show/Hide</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnHide").click(function(){ $("p").hide(); }); $("#btnShow").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>Click "Hide Message" !!</p> <button id="btnHide">Hide Message </button> <button id="btnShow">Show Message</button> </body> </html>

jQuery show()

The jQuery show() method serves as a mechanism to reveal concealed HTML elements within a web page's structure. This function is particularly instrumental in making previously hidden elements visible to the user. However, a notable characteristic of the show() method is its smooth handling of situations where the method is applied to an element that is already in a visible state.

When the show() method is invoked on an element that is already displayed, it operates with an inherent sense of efficiency and discernment. In this scenario, the method appreciates the element's current state and acknowledges that it is already visible to the user. Consequently, the invocation of show() on an element that is already being shown does not yield any discernible transformation or alteration in the element's appearance or behavior.

Syntax
$(selector).show(duration,callback);
  1. duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.

  2. callback – optional function to be executed once the method’s execution is complete.

This behavior exemplifies a nuanced design principle inherent to jQuery's approach, where redundant or superfluous operations are handled intelligently. As a result, developers are spared from unintended and unnecessary changes to the visual presentation of elements that are already visible, maintaining a seamless and unobtrusive user experience.

example
$("p").show();

The show() method in jQuery offers the flexibility to control the display duration of an element by accepting a speed parameter. This parameter dictates the pace at which the element's visibility transition occurs. For those seeking simplicity, predefined strings such as 'slow', 'normal', or 'fast' can be employed to set the speed. Conversely, for a more precise approach, specifying a numeric value representing milliseconds grants careful control over the speed, accommodating tailored user experiences with precision.

$("p").show('slow'); $("p").show('normal'); $("p").show('fast'); $("p").show(1000);

jQuery hide()

The jQuery hide() method embodies a powerful capability within web development, enabling the discrete concealment of HTML elements. Through its invocation, this method orchestrates a gradual fading effect that artfully removes an element from the user's view. By skillfully manipulating the element's opacity and space allocation, the hide() method renders the element imperceptible while preserving the layout's integrity. This functionality is conducive to refining user interactions, streamlining content presentation, and imbuing web pages with a sophisticated dynamism.

Notably, applying the hide() method to an element already hidden or concealed has no impact, as the method astutely recognizes the element's current state and refrains from redundant actions. This level of discernment underscores jQuery's commitment to efficient and user-centric design principles. Thus, the hide() method stands as an instrumental tool for crafting seamless, visually engaging experiences within modern web interfaces.

Syntax
$(selector).show(duration,callback);
  1. duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.

  2. callback – optional function to be executed once the method’s execution is complete.
example
$("p").hide();

The hide() method in jQuery encompasses a dynamic feature that empowers developers to discreetly remove HTML elements from view. This method's functionality extends to enabling the gradual fading transition of elements, maintaining a seamless user experience. By incorporating a speed parameter, developers exercise granular control over the pace of the element's disappearance. To expedite the process, predefined strings such as 'slow', 'normal', or 'fast' can be provided to indicate the desired speed.

Alternatively, for a more precise adjustment, numeric values representing milliseconds can be employed, enabling careful customization. This nuanced approach exemplifies jQuery's commitment to versatile and user-centric development practices. Furthermore, it's noteworthy that invoking the hide() method on an already hidden element elicits no change, a testament to jQuery's efficiency in handling such scenarios. As a result, this method emerges as a potent tool for refining user interactions and elevating the sophistication of web interfaces.

$("p").hide('slow'); $("p").hide('normal'); $("p").hide('fast'); $("p").hide(1000);

jQuery toggle()

The jQuery toggle() method assumes a key role in facilitating the alteration of the visibility state of HTML elements, toggling between display and concealment. Through the ingenious application of this method in tandem with a toggle mechanism, a seamless transformation is realized whereby a single button serves to both reveal and conceal an item. This consistent interaction ensures that upon clicking the button, the item materializes into view, and upon a subsequent click, it elegantly fades away, aligning with the principle of toggling. This dynamic interplay between visibility states significantly enhances user experiences, promoting an intuitive and user-friendly interface.

Syntax
$(selector).toggle(duration,callback);
  1. duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.

  2. callback – optional function to be executed once the method’s execution is complete.
example
$("p").toggle();

The toggle() method in jQuery offers a versatile mechanism for seamlessly alternating the display state of HTML elements, presenting a compelling fusion of visibility dynamics. Augmenting this functionality, developers have the flexibility to impart nuanced pacing to these transitions. By integrating a speed parameter, the toggle() method acquires the ability to dictate the tempo of element visibility changes. To streamline this process, developers can effortlessly employ predefined string values such as 'slow', 'normal', or 'fast' to signify the desired pacing.

Alternatively, for careful precision, numeric values, denoting milliseconds, can be directly provided, facilitating fine-tuned control over the transition speed. This comprehensive approach underscores jQuery's commitment to catering to varying needs and preferences, ensuring a fluid and tailored user experience. Notably, invoking the toggle() method on an element that is already concealed or displayed yields discerning behavior, reflecting jQuery's thoughtfulness in handling such scenarios. In essence, the toggle() method stands as an instrumental tool for orchestrating seamless and engaging interactions within web interfaces, embodying jQuery's ethos of user-centric and efficient design.

$("button").click(function(){ $("p").toggle(); });
<p>Show/Hide message using toggle()</p> <button>Show/Hide Message </button>
run this source code Browser View

Show/Hide message using toggle()

Full Source
<html> <head> <title>jQuery Toggle</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>Show/Hide message using toggle()</p> <button>Show/Hide Message </button> </body> </html>

Conclusion

jQuery Effects encompass a range of dynamic visual enhancements for web interfaces. By providing methods like show(), hide(), and toggle() with customizable speed settings, developers can seamlessly control the visibility of HTML elements, promoting user-friendly interactions and elevating the user experience.






Related Topics
  1. Fade effect in jquery
  2. Sliding Effect in jquery
  3. jQuery Effect animate() Method
  4. jQuery queue(), dequeue() and clearQueue()
  1. jQuery Stop() finish()
  2. jQuery Callback Function
  3. jQuery Shake Effect