简体   繁体   中英

How to add a fade in effect in javascript whenever the image changes when click?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM