CODEWITHSUNDEEP
jquery
Dillon
Dillon

Reputation: 51

jQuery not showing image on click

Can anyone advise on whats wrong here? all the images appear after button click apart from div6 which doesnt show at all? Have I got code wrong on dix6 somewhere, any help much appreciated!

Many thanks!

   <!DOCTYPE html>
   <html>
   <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
   <script>
  $(window).load(function () {
    $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(3000);
        $("#div4").fadeIn(5000);
        $("#div5").fadeIn(7000);
        $("#div6").animate({ left: '250px' });

    });
    });
   </script>
   </head>
   <body>
    <p>Demonstrate fadeIn() with different parameters.</p>
    <button>Click to fade in boxes</button>
    <br />
    <br />
   <div id="div1"style="display: none">    
    <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage1.png" alt="about" width="150" height="75" /></a>
    </div>
  <div id="div2" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage2.png" alt="about" width="150" height="75"/></a>
  </div>
  <div id="div3" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage3.png" alt="about" width="150" height="75"/></a>
  </div>
  <div id="div4" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage4.png" alt="about" width="150" height="74"/></a>
  </div>
  <div id="div5" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage5.png" alt="about" width="150" height="75"/></a>
  </div>
   <div id="div6" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage6.png" alt="about" width="150" height="75"/></a>
  </div>
 </body>

Upvotes: 1

Views: 116

Answers (3)

S. S. Rawat
S. S. Rawat

Reputation: 6101

try this, this will help you

 $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(3000);
        $("#div4").fadeIn(5000);
        $("#div5").fadeIn(7000);
        $("#div6").animate({ marginLeft: "+=50px" },
                  {
                      duration: 500,
                      complete: function () {
                   $("#div6").show();       
                      }
                  });

    });

fiddle Here

Upvotes: 1

Manu M
Manu M

Reputation: 1064

You are not showing the div but just animating.. Use like this.

$("#div6").show().animate({ left: '250px' });

Upvotes: 3

Alex
Alex

Reputation: 1304

Your div is still hidden, animate doesn't remove the display:none

try 

$("#div6").animate({ left: '250px' }).show();

Upvotes: 3

Related Questions