title: Is there any way to have a transition effect when changing the innerHTML?
body: <p>I'm trying to add a transition effect when switching between projects. This code currently works, but I'd rather have something like having a fade effect when switching projects. Is this possible?</p>
  
  <p><a href="https://jsfiddle.net/bsgz5L12/1/embedded/result/" rel="noreferrer">Here is a jsfiddle</a> if that helps at all. Thanks!</p>
  
  <p>My code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="proj_name"&gt;&lt;/div&gt;
    &lt;div id="proj_description"&gt;&lt;/div&gt;
    &lt;img id="proj_img" src=""&gt;&lt;br&gt;
    &lt;button id="proj_switcher"&gt;Next Project&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>/**
   * Constructor function for Projects
   */
  function Project(name, description, img) {
    this.name = name;
    this.description = description;
    this.img = img;
  }
  
  // An array containing all the projects with their information
  var projects = [
    new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
    new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
    new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
    new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
    new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
  ];
  
  // Cacheing HTML elements
  var projName   = document.querySelector('#proj_name');
  var projDescr  = document.querySelector('#proj_description');
  var projImg    = document.querySelector('#proj_img');
  var projButton = document.querySelector('#proj_switcher');
  
  // Index of the current project being displayed
  var projIndex = 0;
  
  projButton.addEventListener('click', function() {
    projName.innerHTML = projects[projIndex].name;
    projDescr.innerHTML = projects[projIndex].description;
    projImg.src = projects[projIndex].img;
    projImg.style.width = '250px';
    projImg.style.height = '150px';
  
    projIndex = (projIndex + 1) % projects.length;
  });
  </code></pre>