Home/ Questions/Q 9106111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T02:15:41+00:00

I have the following jQuery code below I am trying to use (I know

  • 0

I have the following jQuery code below I am trying to use (I know it’s not optimized, but I do not think that is the issue; feel free to optimize it though):

$(document).ready(function(){
  var cur = 0;
  function slideshow() {
  $("#imgdisp").fadeOut(400);
  if (cur >= 3) {
    cur = 1;
  } else {
    cur++;
  }
  $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
    $("#imgdisp").fadeIn(400);
    setTimeout(slideshow,4000);
  }
  slideshow();
})

With the following HTML file:

<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>

What I am trying to create is a slideshow that does the following (in order):

1) fade out current image

2) remove the current image

3) append a new image (called home_2.jpg, and it goes up to home_3.jpg)

4) fade in

5) wait four seconds to repeat with the next image

However, when I try to run this code, it appends the new image before fading out, so the image appears abruptly, fades out, then fades in, and waits four seconds before it repeats. My questions are:

1) How do I fix this code such that it changes the image while the div is faded out?

2) Is there a way to have the image fade immediately to the next image?

Thanks in advance to everyone who contributes 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this one:

    $(document).ready(function(){
        var cur = 1;
        function slideshow() {
            if (cur >= 3) {
                cur = 1;
            } else {
                cur++;
            }
            setTimeout(function(){
                $("#imgdisp").fadeOut(400, function(){
                    $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
                    $("#imgdisp").fadeIn(400);
                });
                slideshow();
            }, 4000);
        }
        slideshow();
    });
    • 0