Expain the fadeTo method in JQuery with example.

0 votes
51 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

Expain the fadeTo method in JQuery with example.

1 Answer

1 votes
Ravi Vishwakarma answered 29-Jul-2021 by Ravi Vishwakarma
JQuery fadeTo()
 JQuery’s fadeTo() method is used to reduce the given opacity. Works to make it disappear. But its function requires opacity and speed.
Syntax:

$(selector).fadeTo(speed,opacity)
$(selector).fadeTo(speed,opacity,callback)
Speed and opacity must require in this function for and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. And opacity value belongs to (0.0 to 1.0) Callback function to be called after completion of fadeTo() . We also put true and false value for showing and hiding element respectively.
<!DOCTYPE html>

<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
    $(document).ready(function () {
        $('button').click(function () {
            $('#div1').fadeTo(1000, 0.2);
            $('#div2').fadeTo('slow', 0.1);
            $('#div3').fadeTo(2000, 1, function () {
                $('#div3').css({ 'border': '10px solid red', 'background': 'red' });
            });
        });
    });
</script>
    <style>
        div {
            width:150px;
            height:150px;
            border:10px solid green;
        }
        img {
            width:inherit;
            height:inherit;
        }
    </style>
</head>
<body>
<button>Click to fade in boxes</button><br><br>
<div id='div1' >
    <img src='kari-shea-1SAnrIxw5OY-unsplash.jpg' />
</div><br>
<div id='div2'>
    <img src='heart.png' />
</div><br>
<div id='div3'>
</div>
</body>
</html>
Expain the fadeTo method in JQuery with example.