How do you make transition:opacity work in an appendChild context?

HTML & CSS
1

The following HTML allows the visitor to click on a thumbnail, then the JS script will make a larger version pop on in the “showImage” span. This works perfectly.

However, to make it appear more professional, how could I make it fade on quickly, going from opacity 0.5 to opacity 1.0? I have no idea how to relate it to the JS script.

Can you point me in a direction to create this effect? I don’t know if it’s possible.

< span id="showImage"></span>< br>< br>
< a href="#showImage" onclick="showImage('spraying')">< img id='spraying' class='thumb' src="../images/2016-offroad-sun_spraying.jpg" alt="Image"></a>
< a href="#showImage" onclick="showImage('champion2')">< img id='champion2' class='thumb' src="../images/2016-offroad-sun_champion2.jpg" alt="Image"></a>

< script>
function showImage(name) { 
    var list = document.getElementById('showImage'); // empty the span of previous image showing
    if (list.hasChildNodes()) {
        list.removeChild(list.firstChild);
    }
    var elem = document.createElement('img');
    elem.style.width = '100%';
    elem.style.maxWidth = '500';
    elem.alt = 'Image from ...';     
    elem.title = 'Image from ...';   
        if (name === 'spraying') {elem.src = '../images/2016-offroad-sun_spraying.jpg';} 
        if (name === 'champion2') {elem.src = '../images/2016-offroad-sun_champion2.jpg';}
    var showImage = document.getElementById('showImage'); 
    showImage.appendChild(elem); 
}
< /script>
2

You could fade the first item by adding a class with the js and setting an animation in css.

e.g. this is a rough example.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#showImage img{
	opacity:0.3;
}
.showImage img{animation:fadeImage 2s ease forwards;}
@keyframes fadeImage {
	from {opacity:0.3}
	to {opacity:1.0}
}


img{display:inline-block;width:300px;height:300px;background:red;}
</style>

</head>

<body>
<span id="showImage"></span><br><br>
<a href="#showImage" onclick="showImage('spraying')"><img id='spraying' class='thumb' src="../images/2016-offroad-sun_spraying.jpg" alt="Image"></a>
<a href="#showImage" onclick="showImage('champion2')"><img id='champion2' class='thumb' src="../images/2016-offroad-sun_champion2.jpg" alt="Image"></a>

<script>
function showImage(name) { 
    var list = document.getElementById('showImage'); // empty the span of previous image showing
    list.className = list.className.replace( /(?:^|\s)showImage(?!\S)/g , '' )
	if (list.hasChildNodes()) {
        list.removeChild(list.firstChild);
    }
    var elem = document.createElement('img');
    elem.style.width = '100%';
    elem.style.maxWidth = '500';
    elem.alt = 'Image from ...';     
    elem.title = 'Image from ...';   
        if (name === 'spraying') {elem.src = '../images/2016-offroad-sun_spraying.jpg';} 
        if (name === 'champion2') {elem.src = '../images/2016-offroad-sun_champion2.jpg';}
    var showImage = document.getElementById('showImage'); 
    showImage.appendChild(elem);
	list.className += " showImage"; 
}
</script>

</body>
</html>

For a true crossfade effect though you would need to have two images in the same place and fade one out while you fade the new one in.

3

PaulOB - This is really nice! It does exactly what I need. Thank you so much!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.