CODEWITHSUNDEEP
jqueryjquery-ui
user379888
user379888

Reputation:

Displaying and hiding images

I am trying to create a small animated effect with jquery in which images display and then hide one after the other.In my code all images display at once and then hide one by one. Please help out. Thanks

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);

});
</script>
</head>

<body>
<img class="hide1" class="show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="hide2" class="show2" style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="hide3" class="show3" style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="hide4" class="show4" style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="hide5" class="show5" style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="hide6" class="show6" style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>

EDIT

After getting suggestions I have made modifications. I have used hide but still it does not hide.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);
    $('.noshow').hide(0);


});
</script>
</head>

<body>
<img class="noshow hide1 show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="noshow hide2 show2 " style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="noshow hide3 show3 " style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="noshow hide4 show4 " style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="noshow hide5 show5 " style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="noshow hide6 show6 " style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>

Upvotes: 0

Views: 106

Answers (2)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

You are using the same image for all those img tags from which I am assuming you are trying to create a image flickr effect. For that you can follow this tutorial.

If you want you code to behave synchronously then you have to inserts each show/hide into another's complete callback like this

$(".hide1").delay(2050).hide(1,function(){
         $('.show1').delay(2000).show(1,function(){
              $(".hide2").delay(2550).hide(1);
        });
 });

Which will create a very big chain and not desirable. Check the above tutorials output at http://www.mattbudd.co.uk/ If you want something like that You can follow the tutorial.

Here's a possible solution to your problem if I am not mistaken

Working Demo

Upvotes: 1

YavgenyP
YavgenyP

Reputation: 2123

They are shown together at first, because theres nothing written that would make them hide. Yuo can add a "display:none" styling to them, if what u want them to do is to show/hide one bye one, or u can alter ur script to hide() all of them without any delay, and then add ur original code.
You also dont need the 2 differen css classes, as they dont affect the images in anyway

Upvotes: 1

Related Questions