fadeIn, fadeOut, fadeToggle, fadeTo in jQuery

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/fadeIn_fadeOut_fadeToggle_fadeTo.css">
    <title>fadeIn, fadeOut, fadeToggle, fadeTo</title>
</head>

<body>
    <h1>jQuery fadeIn & fadeOut Method</h1>

    <div id="box">
        <h2>Test Box</h2>
        <p>Lorem, ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Quod corporis laborum ratione, quas
            dolor nisi? Dicta labore enim omnis, voluptates sint ipsum dolorum minima voluptas numquam magnam aliquid
            natus itaque?</p>
    </div>
    <br>
    <button id="fadeOutBtn">fadeOut</button>
    <button id="fadeInBtn">fadeIn</button>
    <button id="fadeToggleBtn">fadeToggle</button>
    <button id="fadeToBtn">fadeTo</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#fadeOutBtn").click(function () {
                // $("#box").fadeOut("slow");
                $("#box").fadeOut(3000, function () {
                    console.log("Now it is hidden");
                });    //Here, In 3000 miliseconds, it will disappears
            });

            $("#fadeInBtn").click(function () {
                // $("#box").fadeIn("slow");
                $("#box").fadeIn(3000, function () {
                    console.log("Now it is show");
                });    //Here, In 3000 miliseconds, it will appears
            });

            $("#fadeToggleBtn").click(function () {
                // $("#box").fadeToggle("slow");
                $("#box").fadeToggle(2000, function () {
                    console.log("Now it is hidden and show");
                    //Here, In 2000 miliseconds, it will appears and disappears
                });
            });

            //fadeTo Method: $(selector).fadeTo(speed,opacity,callback);
            $("#fadeToBtn").click(function () {
                $("#box").fadeTo(2000, 0.5, function () {
                    console.log("Now it is fadeTo Effect show");
                });
            });
        });
    </script>
</body>

</html>






Below File is css/fadeIn_fadeOut_fadeToggle_fadeTo.css File.
#box {
    background: #90ee90;
    padding: 10px;
    border: 2px solid #000000;
}







Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more