jQuery UI | show() Method
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.