You can easily do that using a CSS transition. First you turn the opacity of the fields to 0, and then you replace the content and you make the fields appear again.
For doing this, first you wrap the project fields:
<body>
<div id="project"></div>
<div id="proj_name"></div>
<div id="proj_description"></div>
<img id="proj_img" src=""><br>
</div>
<button id="proj_switcher">Next Project</button>
</body>
Add the following CSS code:
<style>
#project {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
</style>
And then, add before the change:
var project = document.querySelector('#project');
project.style.opacity = 0;
And after it:
project.style.opacity = 1;
The final javascript would be:
/**
* 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 project = document.querySelector('#project');
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() {
// Fade out
project.style.opacity = 0;
// Wait for the transition
setTimeout(function(){
// Load new content
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;
// Fade in
project.style.opacity = 1;
},500);
});
You can try it here: https://jsfiddle.net/9c4mx7p9/
EDIT
Version with CSS classes: https://jsfiddle.net/y4p1y0ch/
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
