The show() method of jQuery UI framework displays or manages all types of visual effects for the matched selected elements whose styles are designed in the CSS code for the user interface.
(selector).show( effectType[, options ] [, duration ] [, complete ] );
Parameters: It accepts a parameter “effectType” which is the type of the visual effect that are going to be added.
- effectType: The type is string. It specifies the type of the effect which is used for the transition.
- options: The type is object . It specifies the options required for the specific setting for easing.
- duration: The types are number or string . This specifies about, how long the animation effect should run for example fast, slow or 400ms
- complete: This is the callback method which is called when the animation effect is completed.
Return Value: It returns the selected elements with the given visual effect.
Links for jQuery UI:
Example 1: In the following example, the show() function is implemented in jQuery code with shake effect type and time and distance as its options, and one callback function as its parameters which displays the visual effect for the matched elements. The callback function is called after the effect is completed or done on the screen. The callback function fades out the container after the completion of the effect during the process.
Example 2: In the following example, the simple implementation of show() method is done in jQuery code with the bounce visual effect as its parameter. The method is applied on “h2” element of the user interface page. ui-corner-all and ui-state-default are the in-built classes provided by the jQuery UI CSS framework to make the UI more interactive and beautiful.
Example 3: The jQuery UI framework provides show() method with many varieties of visual effects as its parameter. In the following example, we will demonstrate the method with a combobox menu option to select a visual effect type by the user. When the effect type is selected by the user, it is passed to show() method for the output, as shown in the output image. The programmer can write the code and choose parameters as per the project requirement.
- jQuery | Effect show() Method
- How to show contents of selected row of a table in Bootstrap model using jQuery ?
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- p5.js | show() Function
- Vue.js | v-show directive
- Define ng-if, ng-show and ng-hide
- AngularJS | ng-show Directive
- jQuery | add() method with Example
- JQuery when() method
- jQuery | css() Method
- jQuery | get() Method
- jQuery | off() Method
- jQuery | is() Method
- jQuery | before() Method
- jQuery even() Method
- jQuery | die() Method
- JQuery | map() Method
- JQuery sub() method
- JQuery | now() method
- jQuery odd() Method
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.