Regarding JavaScript, Is there an easier way to code this?

Question

I'm learning JavaScript in depth and I'm wondering if i've coded this the best way possible? I tried creating my own fade out animation based off of data attribute values. Please let me know if theres a way to simplify this. Thanks

Don't mention jQuery please. I'm trying to learn JavaScript, I'm well aware that jQuery already made this.

HTML

<div id="box" style="background-color: black; width: 100px; height: 100px;"></div>

<div data-action="fadeout" style="background-color: red; width: 100px; height: 100px;"></div>

<div data-action="fadeout" style="background-color: green; width: 100px; height: 100px;"></div>

<div data-action="fadut" style="background-color: green; width: 100px; height: 100px;"></div>

JavaScript

var x = document.querySelectorAll("[data-action]");
console.log(x);

for (i = 0; i < x.length; i++){

    var j = x[i];

    if (j.getAttribute("data-action") === "fadeout"){
        j.addEventListener("click", function(){
            fadeout(this);
        });
    }

}

function fadeout(x){

    var i = 1;
    x.style.position = "relative";

    fade();

    function fade(){
        console.log("hi");
        if (i > 0){

            x.style.opacity = i.toString();

            setTimeout(function(){
                fade();
                i -= .1;
            }, 50);

        } 
        else{
            x.style.display = "none";
        }
    }


}

http://jsfiddle.net/qdjLyg2o/

Answer 1

CSS animations or CSS transitions would be a better way to implement a fade effect: they would be smoother and use less CPU, and mean less code for you too. Generally avoid animations in JavaScript unless they absolutely cannot be accomplished using CSS's animation or transition repertoire.

*[data-action="fadeout"] {
    opacity: 1.0;
    transition: opacity 0.5s ease-in-out; /* your code changed opacity by 0.1 every 50ms, that's 0.0-1.0 over 500ms */
}
*[data-action='fadeout'].clicked {
    opacity: 0.0;
}

Then use JavaScript to set the .clicked class:

var divs = document.querySelectorAll("[data-action='fadeout']");
for(var i=0; i < divs.length; i++) {
    divs[i].addEventListener("click", function(){
        this.className = "clicked";
    });
}