How to add a fade in or out effect whenever the image changes when you click next for the next image? I'm using canvas here. I'm not using an automatic slide, nor using timeout. Basically, it adds in an effect during the image transition.
function nextimg() {
i++;
if(i > 0 && i < 6) {
image.src = 'images/' + i + '.jpg';
}
if(msg1 == i) {
msg = "Fallout 4";
document.getElementById("caption").innerHTML = msg;
}
else if(msg2 == i) {
msg = "Diamond City";
document.getElementById("caption").innerHTML = msg;
}
else if(msg3 == i) {
msg = "Commonwealth";
document.getElementById("caption").innerHTML = msg;
}
else if(msg4 == i) {
msg = "Glowing Sea";
document.getElementById("caption").innerHTML = msg;
}
else if(msg5 == i) {
msg = "Cambridge";
document.getElementById("caption").innerHTML = msg;
}
var canvas = document.getElementById("img_1").className += "fadeOutEffect";
var canvas = document.getElementById("img_1");
var context = canvas.getContext("2d");
context.drawImage(image, 0,0, 500, 400);
}
==================================
#prevpic {
opacity:1;
transition: opacity 1s;
}
#nextpic.fadeOutEffect {
opacity:0;
}
=================================
<h2 id="caption"></h2>
<canvas id="img_1" width="500" height="400">
<--!input type="submit" onclick="canvas(); return false;"!-->
</canvas><br><br>
<input type="submit" id="prevpic" value="Previous" onclick="previmg()">
<input type="submit" id="nextpic" value="Next" onclick="nextimg()">
You can try this:
function nextimg() {
i++;
if(i > 0 && i < 6) {
image.src = 'images/' + i + '.jpg';
}
if(msg1 == i) {
msg = "Fallout 4";
document.getElementById("caption").innerHTML = msg;
}
else if(msg2 == i) {
msg = "Diamond City";
document.getElementById("caption").innerHTML = msg;
}
else if(msg3 == i) {
msg = "Commonwealth";
document.getElementById("caption").innerHTML = msg;
}
else if(msg4 == i) {
msg = "Glowing Sea";
document.getElementById("caption").innerHTML = msg;
}
else if(msg5 == i) {
msg = "Cambridge";
document.getElementById("caption").innerHTML = msg;
}
var canvas = document.getElementById("img_1");
canvas.className += " fadeOutEffect"; // Add an space so do not concats existent classes
canvas.addEventListener("transitionend", function transitionend() {
canvas.removeEventListener("transitionend", transitionend, false);
clearTimeout(tim);
canvas.className = canvas.className.replace(" fadeOutEffect", "");
}, false);
var tim = setTimeout(transitionend, 1100); // To overcome old browsers
var context = canvas.getContext("2d");
context.drawImage(image, 0,0, 500, 400);
}
What is does is to listen for the transitionend
event and remove the class when the event ended. The canvas will transition back to opacity: 1
. It also does it with a timeout so can hold browsers still not supporting transitionend
event. Btw they are old browses almost unused nowadays (IE9 and such): http://caniuse.com/#search=transitionend you can remove it if you want.
Protip: Keep your indentation clean.
Protip 2: To add text to an element, use textContent
instead of innerHTML
. Is faster and allows special characters without any preconversion, like plain <
and >
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.