Effect fadeTo() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:fadeTo

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. fadeTo

Description

The fadeTo() method changes the opacity to a specified value.

Syntax 

$(selector).fadeTo(speed, opacity, easing, callback)
Parameter Require Description Value
speed Required. speed of the fading effect. Possible values: milliseconds "slow" "fast"
opacity Required. opacity to fade to. Must be a number between 0.00 and 1.00
easingOptional. speed of the element in different points of the animation. Default value is "swing"
callback Optional.A function to be executed after the fadeTo() method is completed a function

Possible easing values:

  • "swing" - slower at the beginning/end, but faster in the middle
  • "linear" - in a constant speed

The following code shows how to Gradually change the opacity of all <p> elements:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").fadeTo(1000, 0.4);
    });//www  .j  a  va2  s  .c  o m
});
</script>
</head>
<body>

<button>Gradually change the opacity of the p element</button>

<p>This is a paragraph.</p>

</body>
</html>

Related Tutorials