Jquery effects

Jquery effects

jQuery offers a ridiculously simple interface for creating a variety of fantastic effects. We may utilize jQuery methods to quickly apply common effects with minimal preparation. This lesson walks you through the essential jQuery methods for creating visual effects.
Visible elements and those that are hidden
The procedures for displaying and hiding elements are very straightforward: show() displays the elements in a wrapped set, while hide() hides them.
The show() method [selector] has the following simple syntax.
show(speed, [callback]); show(speed, [callback]); show(speed, [callback

The following is a list of all the parameters and their descriptions. −

speed is a string that represents one of three predefined animation speeds ("slow," "normal," or "rapid") or the number of milliseconds to perform the animation (e.g., 1000).
This optional argument represents a function executed once for each element animated against after the animation completes.
The hide() function [selector] has the following simple syntax.
hide(speed, [callback]); hide(speed, [callback]); hide(speed, [callback

The following is a list of all the parameters and their descriptions. −

speed is a string that represents one of three predefined animation speeds ("slow," "normal," or "rapid") or the number of milliseconds to perform the animation (e.g., 1000).

This optional argument represents a function that will be executed once for each element animated against after the animation completes.

Example

Consider the HTML file below, which includes some JQuery scripting.

<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 1000 ); }); $("#hide").click(function () { $(".mydiv").hide( 1000 ); }); }); </script> <style> .mydiv{ margin:10px; padding:12px; border:2px solid #666; width:100px; height:100px; } </style> </head> <body> <div class = "mydiv"> This is a SQUARE </div> <input id = "hide" type = "button" value = "Hide" /> <input id = "show" type = "button" value = "Show" /> </body> </html>

As a result, you'll get the following outcome:

Switching Between Elements
Toggling the display state of elements between shown and concealed is possible using jQuery. If the element was initially visible, it would be hidden; previously, it would be revealed.

The syntax for one of the toggle() functions is as follows:

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

The following is a list of all the parameters and their descriptions. −

speed is a string that represents one of three predefined animation speeds ("slow," "normal," or "rapid") or the number of milliseconds to perform the animation (e.g., 1000).

This optional argument represents a function that will be executed once for each element animated against after the animation completes.

Example

Any element, such as a simple div> containing an image, can be animated.

<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $(".clickme").click(function(event){ $(".target").toggle('slow', function(){ $(".log").text('Transition Complete'); }); }); }); </script> <style> .clickme{ margin:10px; padding:12px; border:2px solid #666; width:100px; height:50px; } </style> </head> <body> <div class = "content"> <div class = "clickme">Click Me</div> <div class = "target"> <img src = "./images/jquery.jpg" alt = "jQuery" /> </div> <div class = "log"></div> </div> </body> </html>