CODEWITHSUNDEEP
jquery
J. Vesa
J. Vesa

Reputation: 67

Trying to hide an image when website loads, but have a button that shows it

I'm not sure why this isn't working, keep it simple.

I need it to be JQuery as well because this is kind of an exercise I need to do on JQuery

<script>
$(document).ready(function(){
    $(".kuva1").hide()
        });

$(document).ready(function(){
    $("button").click(function(){
        $("#kuva1").fadeIn(5000);
    });
});
</script>

<button type="button">Show Image</button>

<div id="div1">
<img class="kuva1" src="./kuvat/daisy.jpg" style="width:384px;height:216px;">
<div>

Upvotes: 3

Views: 28

Answers (2)

mplungjan
mplungjan

Reputation: 178109

Apart from using the correct selector (. which is class, not # which is ID) I suggest you hide using CSS:

<head>
  <style>.kuwa1 { display:none;width:384px;height:216px;}</style>
  <script src="jquery.js"></script>
  <script>
   $(function() { 
     $("button").on("click",function(e){ 
      e.preventDefault(); 
      $(".kuva1").fadeIn(5000);
     });
   });
   </script>
 </head>
 <body>
   <button type="button">Show Image</button>
   <div id="div1">
     <img class="kuva1" src="./kuvat/daisy.jpg"/>
   <div>
</body>

Upvotes: 1

Prashant
Prashant

Reputation: 385

Try to use . instead of # since you donot have id but class

$(document).ready(function(){
$("button").click(function(){
    $(".kuva1").fadeIn(5000);
});
});

Upvotes: 1

Related Questions