jQuery effects – fadeIn(), fadeOut(), fadeToggle(), fadeTo()

jQuery effects effects that can be added to parts of a web page using the jQuery library. These effects include fadeIn(), fadeOut(), fadeToggle(), fadeTo() and more.

Fade

- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            margin: 0%;
            padding: 0%;
        }

        button{
            padding: 1%;
        }
        .head{

            width: 100%;
            height: 90px;
            background-color: slateblue;
        }
        h1{
            color: whitesmoke;
            padding: 2%;
        }
        .nav1{
            height: 90px;
            background-color: red;
            display: none;

        }

        .nav2{
            height: 90px;
            background-color: red;
            display: none;

        }

        .nav3{
            height: 90px;
            background-color: red;
            display: none;

        }

        ul{
            padding: 3%;
        }
        ul li{
            color: whitesmoke;
            display: inline;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="head">
<h1><button class="fadein">fadein</button><button class="fadeout">fadeout</button><button class="fadetoggle">fadetoggle</button><button class="fadeto">fadeto</button></h1>
    </div>



  

    <!-- fadeIn - is used to fadein any element   
    
    $(selector).fadeIn(speed,callback);
    -->

    <!-- fadeOut - is used to fadeout any element
         $(selector).fadeOut(speed,callback); 
    
    -->

    <!--  fadeToggle- is used to Toogle both fadein and fadeout for  any element
    $(selector).fadeToggle(speed,callback);
    -->

    <!-- fadeTo - The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
      $(selector).fadeTo(speed,opacity,callback);
    
    -->

    <nav class="nav1">
        <ul>
            
            <li>home</li>
            <li>aboutus</li>
            <li>Contactus</li>
            <li>Blog</li>
            <li>Faq</li>
        
        </ul>
    </nav>

    <nav class="nav2">
        <ul>
            
            <li>home</li>
            <li>aboutus</li>
            <li>Contactus</li>
            <li>Blog</li>
            <li>Faq</li>
        
        </ul>
    </nav>

    <nav class="nav3">
        <ul>
            
            <li>home</li>
            <li>aboutus</li>
            <li>Contactus</li>
            <li>Blog</li>
            <li>Faq</li>
        
        </ul>
    </nav>
    
    
    <script src="jquery-3.6.0.min.js"></script>
    <script>

        $(document).ready(function(){


            $(".fadein").click(function(){

                $(".nav1").fadeIn(1000)
                $(".nav2").fadeIn(1200)
                $(".nav3").fadeIn(1500)
            
            })
            $(".fadeout").click(function(){

$(".nav1").fadeOut(1000)
$(".nav2").fadeOut(1200)
$(".nav3").fadeOut(1500)
})
   

        $(".fadetoggle").click(function(){

$(".nav1").fadeToggle(1000)
$(".nav2").fadeToggle(1200)
$(".nav3").fadeToggle(1500)
})



$(".fadeto").click(function(){

$(".nav1").fadeTo("slow",0.3)
$(".nav2").fadeTo("slow",0.5)
$(".nav3").fadeTo("slow",0.9)    
})
})
    </script>
</body>
</html>

Tags: fadeIn(), fadeOut(), fadeToggle(), fadeTo(), jquery effects, jquery effects tutorials, jquery, jquery code snippets

MIT license