Est-il possible d'avoir un effet de transition lors du changement de la innerHTML?

J'essaye d'ajouter un effet de transition lors de la commutation entre les projets. Ce code fonctionne pour l'instant, mais je préfère avoir quelque chose comme ayant un effet de fondu lors de la commutation de projets. Est-ce possible?

Voici un jsfiddle si cela aide à tous. Merci!

Mon code:

HTML

<body>
  <div id="proj_name"></div>
  <div id="proj_description"></div>
  <img id="proj_img" src=""><br>
  <button id="proj_switcher">Next Project</button>
</body>

JavaScript

/**
 * 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;
});
Selon le type de transition et de la complexité, vous pourriez avoir un "hors champ" de la mémoire tampon div que vous basculez entre le contenu pour y parvenir. I. e fade in et fade out dans le même temps, nécessite probablement 2 chevauchement des divs (position absolue sur le dessus les uns des autres) où l'on est à l'opacité de 1 et l'autre à l'opacité de 0 et que la transition injecter de nouveau le contenu de la div invisible et, par la suite, l'ensemble de fondu de transition sur le visible div et fondu sur l'invisible div, et votre code besoin de garder une trace qui est qui car vous devrez alterner entre les deux.
Merci! Je suis plus susceptible de suivre vos conseils et à l'utilisation d'un fadeOut et fadeIn div.

OriginalL'auteur saadq | 2015-04-15