Why does jQuery Fading Effect not work properly?-CodePudding

I have a slideshow on my website and I want the transitions of the slides to have a fading animation. For that I used jQuery with the fadeIn and fadeOut commands. I actually have two questions:

The animation does work, however not properly; when I click to the next image, it has the normal, hard change and then the new image is fading out and in again instead of one fading out and the other one fading in. Why is that and how can that be corrected?
The images are only fading in and out when i click the arrows, not when the slideshow is automatically going through the images with my interval of 5 seconds. I tried to integrate the effect with a change-event (when the image is changing the animation should appear) but that doesn't work. Do I have to use another eventhandler oder is there a whole other way?

I couldn't find anything helpful on Google to these questions so I'd be very grateful if someone could help me with this, since I'm also very new to JavaScript and need it for a university project. Thank you! :)

var DiashowBilder = new Array("Bilder/1.jpeg", "Bilder/2.jpeg", "Bilder/3.jpeg", "Bilder/4.jpeg", "Bilder/5.jpeg", "Bilder/6.jpeg", "Bilder/7.jpeg", "Bilder/8.jpeg", "Bilder/9.jpeg", "Bilder/10.jpeg");  
var index = 0;

jQuery.noConflict();

jQuery(document).ready(function() {
  jQuery("#animation").click(function() {
    jQuery("#Vorschaubild").fadeOut(400, function() {
      diashow();
      jQuery("#Vorschaubild").fadeIn(400);
    });
  })
  jQuery("#animation").change(function() {
    jQuery("#Vorschaubild").fadeOut(400, function() {
      diashow();
      jQuery("#Vorschaubild").fadeIn(400);
    });
  })
  jQuery("#next").click(function() {
    jQuery("#Vorschaubild").fadeOut(400, function() {
      diashow();
      jQuery("#Vorschaubild").fadeIn(400);
    });
  })
  jQuery("#previous").click(function() {
    jQuery("#Vorschaubild").fadeOut(400, function() {
      diashow();
      jQuery("#Vorschaubild").fadeIn(400);
    });
  })
});

function nextIMG(n) {
    diashow(index  = n);
    document.getElementsByClassName("dot")[index].classList.add("active");
    document.getElementsByClassName("dot")[index -n].classList.remove("active");
    if (index == DiashowBilder.length) {
        index = 0;
        document.getElementsByClassName("dot")[10].classList.remove("active");
    }
    if (index < 0) {
        index = DiashowBilder.length -1;
    }
}

function currentSlide(n) {
    diashow(index = n);
    dot[index].classList.add("active")
}

function diashow() {
    document.getElementById("Vorschaubild").src = DiashowBilder[index];
    if (index == DiashowBilder.length) {
        index = 0;
    }
    if (index < 0) {
        index = DiashowBilder.length -1;
    }
}
diashow();
function automatischWeiterschalten() {
    nextIMG(1);
}
setInterval(automatischWeiterschalten, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a  onclick="nextIMG(-1)" id="previous">&#10094;</a>
<div id="animation">
  <img id="Vorschaubild" />
  <br/><br/>
  <div style="text-align:center">
    <span  onclick="currentSlide(1)" id="dot1"></span>
    <span  onclick="currentSlide(2)" id="dot2"></span>
    <span  onclick="currentSlide(3)" id="dot3"></span>
    <span  onclick="currentSlide(4)" id="dot4"></span>
    <span  onclick="currentSlide(5)" id="dot5"></span>
    <span  onclick="currentSlide(6)" id="dot6"></span>
    <span  onclick="currentSlide(7)" id="dot7"></span>
    <span  onclick="currentSlide(8)" id="dot8"></span>
    <span  onclick="currentSlide(9)" id="dot9"></span>
    <span  onclick="currentSlide(10)" id="dot10"></span>
  </div>
</div>

<a  onclick="nextIMG(1)" id="next">&#10095;</a>

CodePudding user response：

The main reason why your code won't work as desired is the fact, that the animation is completely unrelated to the update of the src property. The update must happen within the fade function, otherwise this will never be synchronized and work properly.

I updated your code a little bit and moved the animation to the correct location. (And using images which are actually displayed) The code is still not 100% working, but it will allow you to continue your development.

Things to keep in mind:

What happens if you go back when you are at index 0
What happens if the interval image triggers during the 800ms transition you manually started (Maybe consider stopping the interval in this case and restarting it after the transition finished)
Why do you split your logic into nextIMG and diashow. Wouldn't it be better to remove the "active" after the fade out and then add the new "active" after the fade in?

var DiashowBilder = new Array("https://images.freeimages.com/images/large-previews/e4e/circulate-abstract-1562332.jpg", "https://images.freeimages.com/images/large-previews/4ea/abstract-building-1226559.jpg", "https://images.freeimages.com/images/large-previews/e4e/circulate-abstract-1562332.jpg", "https://images.freeimages.com/images/large-previews/5ae/summer-holiday-1188633.jpg");  
var index = 0;

jQuery.noConflict();

jQuery(document).ready(function() {
  jQuery("#animation").click(function() {
    nextIMG(1);
  })
  jQuery("#next").click(function() {
    nextIMG(-1);
  })
  jQuery("#previous").click(function() {
    nextIMG(1);
  })
});

function nextIMG(n) {
    diashow(index  = n);
    document.getElementsByClassName("dot")[index].classList.add("active");
    document.getElementsByClassName("dot")[index -n].classList.remove("active");
    if (index == DiashowBilder.length) {
        index = 0;
        document.getElementsByClassName("dot")[10].classList.remove("active");
    }
    if (index < 0) {
        index = DiashowBilder.length -1;
    }
}

function currentSlide(n) {
    diashow(index = n);
    dot[index].classList.add("active")
}

function diashow() {
    jQuery("#Vorschaubild").fadeOut(400, function() {
      document.getElementById("Vorschaubild").src = DiashowBilder[index];
      if (index == DiashowBilder.length) {
          index = 0;
      }
      if (index < 0) {
          index = DiashowBilder.length -1;
      }
      jQuery("#Vorschaubild").fadeIn(400);
    });
}
diashow();
function automatischWeiterschalten() {
    nextIMG(1);
}
setInterval(automatischWeiterschalten, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a  onclick="nextIMG(-1)" id="previous">&#10094;</a>
<div id="animation">
  <img id="Vorschaubild" />
  <br/><br/>
  <div style="text-align:center">
    <span  onclick="currentSlide(1)" id="dot1"></span>
    <span  onclick="currentSlide(2)" id="dot2"></span>
    <span  onclick="currentSlide(3)" id="dot3"></span>
    <span  onclick="currentSlide(4)" id="dot4"></span>
    <span  onclick="currentSlide(5)" id="dot5"></span>
    <span  onclick="currentSlide(6)" id="dot6"></span>
    <span  onclick="currentSlide(7)" id="dot7"></span>
    <span  onclick="currentSlide(8)" id="dot8"></span>
    <span  onclick="currentSlide(9)" id="dot9"></span>
    <span  onclick="currentSlide(10)" id="dot10"></span>
  </div>
</div>

<a  onclick="nextIMG(1)" id="next">&#10095;</a>