D3 Examples - image-fade

xxxxxxxxxx
 
<!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>
​
    