jQuery Effects

Introduction to Effects

jQuery provides a simple interface for giving various kinds of amazing effects.
It allows you to quickly apply the commonly used effects with minimum configuration.

1. click()

We have used click() in the initial programs.

Example:
$(“button”).click(function() {…})
This example performs a specified function on the click action of a button.

2. Hide Effect

Syntax:
$selector.hide([speed], [callback]);

Where,
speed – to run the animation. It can be slow, normal or fast or number of milliseconds.
callback – optional parameter which represents a function to be executed whenever the animation completes.

Example: Writing the hide method.
$(“selector”).hide() - It hides all the paragraphs.

3. Showing and Hiding elements

To show and hide the elements is very easy and it would be done in the same way as expected.
show() is used to show the elements in a wrapped set and hide() is used to hide.

Syntax for show():
[selector].show(speed, [callback]);

Where,

speed – this string represents one of the three predefined speeds i.e. slow, normal, fast or it can even be the number of milliseconds that are needed to run the animation.

callback – it represents a function which is to be executed whenever the animation completes and executes each animated element.

Syntax for hide():
[selector].hide(speed, [callback]);

Example : Demonstrating the show effect method

<html>
<head>
      <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/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
            {
                   width:100px;
                   height:100px;
                   border-radius:50px;
                   font-size:20px;
                   color:green;
                   line-height:100px;
                   text-align:center;
                   background:orange;
            }
            </style>
</head>
<body>
         <div class ="mydiv">
              CIRCLE
         </div>
         <input id="hide" type="button" value="Hide Circle"/>
         <input id="show" type="button" value="Show Circle"/>
</body>
</html>

Output:
hidemet

If you click on the hide button, the circle will hide and with the show button the circle will be shown.

4. Toggling the elements

This action is used for toggling the visibility of the HTML elements using the show() or hide() actions i.e. it hides the shown elements and shows the hidden elements.

Syntax:
$(selector).toggle(speed,callback)

Where,
speed - this string represents one of the three predefined speeds i.e. slow, normal, fast or it can even be the number of milliseconds that are needed to run the animation.

callback – it represents a function which is to be executed whenever the animation completes and executes each animated element.

Example : For toggling the paragraph

$(“button”).click(function()
{
$(“p”).toggle();
});

5. Slide effect

The slide method changes the height for the selected elements.

The slide effects are:

Effects	Description	Example
slideDown()	All the matched elements are revealed by adjusting their height and an optional callback is fired upon completion. Syntax : $(selector).slideDown()	$(“.flip”).click(function() { $(“.panel”).slideDown(); });
slideUp()	All the matched elements are hidden by adjusting their height and an optional callback is fired upon completion. Syntax : $(selector).slideUp()	$(“.flip”).click(function() { $(“.panel”).slideUp(); });
slideToggle()	The visibility of all the matched elements are toggled by adjusting their height and an optional callback is fired upon completion. Syntax : $(selector).slideToggle()	$(“.flip”).click(function() { $(“.panel”).slideToggle(); });

6. Fade Effect

The fade methods change the opacity of the elements selected

Some of the fade effects are:

Effects	Description	Example
fadeIn()	All the matched elements are faded in by adjusting their opacity and an optional callback is fired after completion. Syntax: $(selector).fadeIn()	$(“button”).click(function() { $(“div”).fadeIn(3000); });
fadeOut()	All the elements are faded out by adjusting their opacity to 0, then set display to “none” and an optional callback is fired after completion. Syntax: $(selector).fadeOut()	$(“button”).click(function() { $(“div”).fadeOut(5000); });
fadeTo()	The opacity of all the matched elements are faded to a specified opacity and firing an optional callback after completion. Syntax: $(selector).fadeTo(speed,callback)	$(“button”).click(function() { $(“div”).fadeTo(“fast”,0.30); });

7. Animation Effect

It is a function for creating custom animations.

Syntax:
$(selector).animate({params},[duration],[easing],[callback])

Where,
        params – it is a map of CSS properties that the animation will move towards.
        duration – it is an optional parameter which represents how long the animation will run.
        easing – it is an optional parameter that represents the easing function used for transition.
        callback – it is an optional parameter which represents a function to call once the animation is complete.

8. Hover Effect

This method allows to hover the mouse pointer on a DOM element.

Syntax:
$(“selector”).hover(function() {…})

Example: Writing the hover effect.
$(“.mydiv”).hover()