Effects in jQuery

 [selector]. show( speed, [callback] );

 [selector]. hide( speed, [callback] );

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "#show" ). click ( function () { $ ( ".mydiv" ). show ( 1000 ); }); $ ( "#hide" ). click ( function () { $ ( ".mydiv" ). hide ( 1000 ); }); });  class = "mydiv" > This is a SQUARE 

id="hide"type="button"value="Hide"/> id="show"type="button"value="Show"/>

Toggle elements in jQuery

jQuery provides methods to toggle the display status of elements between display and hide. If the element when initializing is displayed, it will be hidden; If it is hidden, it will be displayed.

Syntax

Simple syntax for a toggle () method in jQuery:

 [selector]. .toggle([speed][, callback]);

Below is a description of the parameters:

1. speed: A string representing one of three predetermined speeds ("slow", "normal", or "fast") or milliseconds to run the effect (eg 1000).
2. callback : This optional parameter represents a function to be executed whenever the effect completes; execute once for each effect.

For example

We can create an effect for any element, such as a div element containing an image:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( ".clickme" ). click ( function ( event ){ $ ( ".target" ). toggle ( 'slow' , function (){ $ ( ".log" ). text ( 'Transition Complete' ); }); }); });  class = "content" >  class = "clickme" > Click Me  class = "target" >  src = "./images/jquery.jpg" alt = "jQuery" />  class = "log" > 

JQuery Effect methods

In the previous section, you followed the basics of jQuery Effect. The table below lists all the basic methods for creating different types of effects:

Method Descriptionanimate (params, [duration, easing, callback])

A function to create custom effects.

fadeIn (speed, [callback])

Fade prints all matching elements by adjusting opacity (brightness) and activating an arbitrary callback after completion.

3fadeOut (speed, [callback])

Fade out all matching elements by adjusting opacity to 0, then setting the display to "none" and activating an arbitrary callback after completion.

fadeTo (speed, opacity, callback)

Fade the shading of all matched elements to a given opacity and activate an arbitrary callback after completion.

hide ()

Hide each element in the matched set if they are already displayed.

hide (speed, [callback])

Hide all matching elements using a nice effect and activate an arbitrary callback after completion.

show ()

Displays each element in the set that matches if they are hidden.

show (speed, [callback])

Displays all matching elements by using a nice effect and activating an arbitrary callback after completion.

slideDown (speed, [callback])

Reveal all matching elements by adjusting their height and activating an arbitrary callback after completion.

slideToggle (speed, [callback])

Toggle the visibility of all matching elements by adjusting the height and activating an arbitrary callback after completion.

slideUp (speed, [callback])

Hide all matching elements by adjusting their height and activating an arbitrary callback after completion.

stop ([clearQueue, gotoEnd])

Stop all currently running effects on all defined elements.

toggle ()

Toggle the display of each element in the set of matching elements.

toggle (speed, [callback])

Toggle the display of each element in the set of matched elements by using a nice effect and activating an arbitrary callback after completion.

toggle (switch)

Toggle the display of each element in the matched set based on the middle switch: true is showing all elements, false is hiding all elements.

jQuery.fx.off

Disable all effects.

UI Library-based effects in jQuery

To use these effects, you can either download the latest jQuery UI Library jquery-ui-1.11.4.custom.zip from jQuery UI Library or use Google CDN to use it in the same way as We made for jQuery.

We used Google CDN for jQuery UI by using the following code snippet in the HTML page:

  src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" > 

Method DescriptionBlind

Blind away the element or display it by blind printing.

Bounce

Bounce element vertically or horizontally n times.

Clip

Clip on or clip off element, vertically or horizontally.

Drop

Drop away the element or display it by drop in.

Explode

Explode elements into multiple parts.

Fold

Fold the element as part of the paper.

Highlight

Highlight background with given color.

Puff

Scale and fade out effects creating puff effects.

Pulsate

Pulsate the shading of the element several times.

Scale

Shrink or grow an element by a certain percentage.

Shake

Shake the element vertically or horizontally n times.

Size

Put the element to the specified height and width.

Slide

Slide out the element out of the viewport.

transfer

Transform the shape of an element for another element.

According to Tutorialspoint

Previous post: jQuery Ajax

Next article: What is AngularJS?

Jessica Tanner

Update 25 May 2019