jQuery fadeTo() Method

jQuery fadeTo() method perform fades in/out effect on the selected elements to a given opacity.

Syntax

This syntax represent to the fadeTo method

$(selector).fadeTo( duration, opacity, easing, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long fading effect will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
opacity Number Required. Specifies the opacity value between 0 and 1.
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the fadeTo is complete.

Example

Here, in this example show fadeTo effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery fadeTo() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#fadeTo").click(function(){
        $("div").fadeTo(3000, 0.3);
      });
    });
  </script>
  <style type="text/css"> 
    div {
      background: #FC5E5E;
      font-family: arial;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button id="fadeTo">fadeTo (3 Seconds)</button>
  <br /><br />
  <div>This element represent fade in/out effect.</div>
</body> 
</html>

Run it...   »