Hallo zusammen, ich hoffe auf Hilfe 
Ich habe mir gerade einen Background fader gebaut. Das Hintergrundbild soll ineinander faden. Das klappt auch soweit gut.
Allerdings wird das erste Hintergrundbild bei der ersten Schleife in "sich selber" gefaded. D.h. man sieht: Bild1, Bild1, bild2, und von vorne (dann jeweils korrekt nur 1x).
Warum ist das erste Bild in der ersten Schleife doppelt zu sehen?
(Neben dem beigefügten JS Code habe ich noch jquery-3.4.1.min.js drin)
Danke
HTML Code:
CSS Code:
JS Code:
Ich habe mir gerade einen Background fader gebaut. Das Hintergrundbild soll ineinander faden. Das klappt auch soweit gut.
Allerdings wird das erste Hintergrundbild bei der ersten Schleife in "sich selber" gefaded. D.h. man sieht: Bild1, Bild1, bild2, und von vorne (dann jeweils korrekt nur 1x).
Warum ist das erste Bild in der ersten Schleife doppelt zu sehen?
(Neben dem beigefügten JS Code habe ich noch jquery-3.4.1.min.js drin)
Danke
HTML Code:
Code:
<!DOCTYPE>
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bg_img_fader.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bg_img_fader.js"></script>
<title>test</title>
</head>
<body>
<div class="fader">
</div>
</body>
</html>CSS Code:
CSS:
.fader
{
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
z-index: -99;
}JS Code:
Javascript:
$(document).ready(function(){
var count = 0;
var images = ["https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529__340.jpg","https://cdn.pixabay.com/photo/2017/10/23/16/43/autumn-2881586_960_720.jpg"];
var image = $(".fader");
image.css("background-image","url("+images[count]+")");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},2000);
});