image-fade

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    
    body { 			margin:49;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    #fadeContainer {
    	position: relative;
    	height: 400px;
    	width: 600px;
		}
		#fadeContainer img {
    	position: absolute;
		}

</style>
</head>

<body>
  
  <div class="#fadeContainer">
  	<img src="https://github.com/BillyBHWong/BillyBHWong.github.io/blob/master/image-temp/Render_day.jpg?raw=true" id="daynight" alt="jQuery Transition Day" style="width:600px;height:450px">    
  </div>
  
  <script>
    
    $(document).ready(function(){
   		//imageOneFade();
		});
    
    
    var imgs = [];
		$('a.thumb').each(function() {
    	var img = new Image();
    	img.src = this.href;
    	imgs.push(img);
		}).click(function () {
    var oldImg = $("#fadeContainer img");
    
    var img = new Image();
    img.src = this.href;
    var newImg = $(img).hide();
    $("#fadeContainer").append(img);
    
    oldImg.stop(true).fadeOut(500, function() {
        $(this).remove();
    });
    newImg.fadeIn(500);
    return false;
});
    
    function imageOneFade(){
  		$('#daytime').fadeIn(2000, function(){ setTimeout("$('#daytime').fadeOut(2000); imageTwoFade();",6000); 			});
		}

function imageTwoFade(){
  		$('#nighttime').fadeIn(2000, function(){ setTimeout("$('#nighttime').fadeOut(2000); imageOneFade();",6000); 			});
		}

</script>
</body>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js