Monday , February 27 2017
Home / jquery / jQuery Fading Effects Example Tutorial

jQuery Fading Effects Example Tutorial

In this tutorial, we are going work with the JQuery Fading Effects. In the previous tutorials, we have discussed about JQuery Hide and Show Effects. As part of the JQuery Fading, we have four effects.

jQuery Fading Effects :

Here is the complete examples on JQuery Fading:

  • JQuery fadeIn
  • JQuery fadeout
  • JQuery fadeTo
  • JQuery fadeToggle

JQuery fadeIn :

JQuery fadein() is method provide by the JQuery API. It is used to make the selected element to fade in.

$(selector).fadeIn();

OR

$(selector).fadeIn(speed, [callback]);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes. It executes only once for each element on a web page.

JQuery fadeIn() Example :

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>JQuery fadeIn Demo Example</title> 
  <style> 
  span { 
    color: blue; 
    cursor: pointer; 
  } 
  div { 
    margin: 3px; 
    width: 80px; 
    display: none; 
    height: 80px; 
    float: left; 
  } 
  #one { 
    background: orange; 
  } 
  #two { 
    background: white; 
  } 
  #three { 
    background: green; 
  } 
  </style> 
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<span>My National Flag colors</span> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
  
<script> 
$( document.body ).click(function() { 
  $( "div:hidden:first" ).fadeIn("slow"); 
}); 
</script> 
  
</body> 
</html>

JQuery fadeOut :

JQuery fadeOut() is method provide by the JQuery API. It is used to make the selected element to fade out.

$(selector).fadeOut()

OR

$(selector).fadeOut(speed, [callback]);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes. It executes only once for each element on a web page.

JQuery fadeOut Example :

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>JQuery fadeOut demo Example</title> 
  <style> 
  p { 
    font-size: 20px; 
    cursor: pointer; 
    color:blue; 
  } 
  </style> 
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
  
<p> 
  Click Me 
</p> 
  
<script> 
$( "p" ).click(function() { 
  $( "p" ).fadeOut( "slow" ); 
}); 
</script> 
  
</body> 
</html>

JQuery fadeTo :

All matched elements are fades from darkness by using the fadeTo() method in effects. That means, all elements are matched with the selector are faded gradually according to the opacity and speed parameters.

$(selector).fadeTo(speed, opacity,[ callback]);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Opacity have a number between 0 to 1. It denotes the target value of opacity. Callback represents the execution of function after animation completes.

JQuery fadeToggle :

fadeToggle() is a method of JQuery, which toggles the element between the fadeIn() and fadeOut() effects. Initially the element is faded in, then the element will be faded out and vice versa.

$(selector).fadeToggle(speed);

OR

$(selector).fadeToggle(speed,callback);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.

JQuery fadeToggle Example :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery fadeToggle demo Example</title>
<style type="text/css">
p {
    font-size: 20px;
    color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button>FadeToggle</button>
    <button>FadeToggle Callback</button>
    <p>FadeToggle</p>
    <p>FadeToggle Callback</p>
    <div id="log"></div>

    <script>
        $("button:first").click(function() {
            $("p:first").fadeToggle("slow", "linear");
        });
        $("button:last").click(function() {
            $("p:last").fadeToggle("fast", function() {
                alert("Action completed..")
            });
        });
    </script>
</body>
</html>

Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *