fadein / out images of array

Question

I am trying to switch a list of images out with the remaining images in an array one by one. I have an array of 15 images, I display 6 of them, and I need to switch out images one by one of the remaining images.

var images = [
'<img class="wp-image-2443" src="http://2-story.com/wp-content/uploads/2012/07/ab-data.png" alt="ab Data" />',
'<img class="wp-image-2444" src="http://2-story.com/wp-content/uploads/2012/07/american-transmission-company.png" alt="American Transmission Company" />',
'<img class="wp-image-2445" src="http://2-story.com/wp-content/uploads/2012/07/arts-at-large.png" alt="Arts @ Large" />',
'<img class="wp-image-2446" src="http://2-story.com/wp-content/uploads/2012/07/baseball-tomorrow.png" alt="Baseball Tomorrow" />',
'<img class="wp-image-2447" src="http://2-story.com/wp-content/uploads/2012/07/brewers-community-foundation.png" alt="Brewers Community Foundation" />',
'<img class="wp-image-2448" src="http://2-story.com/wp-content/uploads/2012/07/city-of-milwaukee.png" alt="City of Milwaukee" />',
'<img class="wp-image-2449" src="http://2-story.com/wp-content/uploads/2012/07/columbia-stmarys-foundation.png" alt="Columbia St. Mary Foundation" />',
 '<img class="wp-image-2450" src="http://2-story.com/wp-content/uploads/2012/07/digestive-health-insurance.png" alt="Digestive Health Alliance" />',
'<img class="wp-image-2451" src="http://2-story.com/wp-content/uploads/2012/07/dorner.png" alt="Dorner" />',
'<img class="wp-image-2486" src="http://2-story.com/wp-content/uploads/2012/07/echelon-innovation-campus.png" alt="Echelon Innovation Campus" />',
'<img class="wp-image-2452" src="http://2-story.com/wp-content/uploads/2012/07/great-lakes-distillery.png" alt="Great Lakes Distillery" />',
'<img class="wp-image-2453" src="http://2-story.com/wp-content/uploads/2012/07/habitati-for-humanity.png" alt="Habitat for Humanity" />',
];
$(document).ready(function(){
  
  $.each(images, function(index, image) {
     if (index > 5) {
             return false;
      }
    
      $('.logo-container').append(image);
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-container">

</div>

Answer 1

This is not exactly the effect as you want in your image, but this does what you are trying to achieve.You can make changes upon it.

$(document).ready(function(){
var images = [
'<img class="wp-image-2443" src="http://2-story.com/wp-content/uploads/2012/07/ab-data.png" alt="ab Data" />',
'<img class="wp-image-2444" src="http://2-story.com/wp-content/uploads/2012/07/american-transmission-company.png" alt="American Transmission Company" />',
'<img class="wp-image-2445" src="http://2-story.com/wp-content/uploads/2012/07/arts-at-large.png" alt="Arts @ Large" />',
'<img class="wp-image-2446" src="http://2-story.com/wp-content/uploads/2012/07/baseball-tomorrow.png" alt="Baseball Tomorrow" />',
'<img class="wp-image-2447" src="http://2-story.com/wp-content/uploads/2012/07/brewers-community-foundation.png" alt="Brewers Community Foundation" />',
'<img class="wp-image-2448" src="http://2-story.com/wp-content/uploads/2012/07/city-of-milwaukee.png" alt="City of Milwaukee" />',
'<img class="wp-image-2449" src="http://2-story.com/wp-content/uploads/2012/07/columbia-stmarys-foundation.png" alt="Columbia St. Mary Foundation" />',
 '<img class="wp-image-2450" src="http://2-story.com/wp-content/uploads/2012/07/digestive-health-insurance.png" alt="Digestive Health Alliance" />',
'<img class="wp-image-2451" src="http://2-story.com/wp-content/uploads/2012/07/dorner.png" alt="Dorner" />',
'<img class="wp-image-2486" src="http://2-story.com/wp-content/uploads/2012/07/echelon-innovation-campus.png" alt="Echelon Innovation Campus" />',
'<img class="wp-image-2452" src="http://2-story.com/wp-content/uploads/2012/07/great-lakes-distillery.png" alt="Great Lakes Distillery" />',
'<img class="wp-image-2453" src="http://2-story.com/wp-content/uploads/2012/07/habitati-for-humanity.png" alt="Habitat for Humanity" />',
];
var startingIndex = 0;
var endIndex = 5;
displayImages(images.slice(startingIndex, endIndex)); 
setInterval(function(){
 if(endIndex >= images.length) endIndex = images.length/2;
 updateImages(images[endIndex]);
 endIndex++;
}, 3000);

function displayImages(imageArray){
  $.each(imageArray, function(index, image) {    
      $('.logo-container').append(image);
  }); 
}
function updateImages(image){
 $('.logo-container img').first().fadeOut("slow", function(){
  $(this).replaceWith(image);
  $(this).fadeIn("slow");
 });
} 

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="logo-container">

</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>