Home/ Questions/Q 7969831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:17:56+00:00

I am trying to create a small animated effect with jquery in which images

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0