Home/ Questions/Q 8972819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:18:32+00:00

I am trying jQuery for the first time. This code was taken from W3schools.

  • 0

I am trying jQuery for the first time. This code was taken from W3schools. Here, if you click on the button you supposed to see 3 boxes. I haven’t changed anything in the code except in the head I have changed the src. I am using Firefox.

    <html>
        <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your src = “http:// …. as it was not getting Jquery file.

    <html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
</head>
<body>
    <p>
        Demonstrate fadeIn() with different parameters.</p>
    <button>
        Click to fade in boxes</button>
    <br>
    <br>
    <div id="div1" style="width: 80px; height: 80px; display: none; background-color: red;">
    </div>
    <br>
    <div id="div2" style="width: 80px; height: 80px; display: none; background-color: green;">
    </div>
    <br>
    <div id="div3" style="width: 80px; height: 80px; display: none; background-color: blue;">
    </div>
</body>
</html>
    • 0