JSFiddle - React, Tailwind, and code Playground

by brandonm

HTML

<div id="lucy">stuff here</div> <a href="#" id="stop">stop it</a>

CSS

#lucy{
     width:300px;
     height:200px;
     background-color:#00FF00; 
}

JavaScript

var fadeImg = document.id('lucy');

fadeImg.set("tween", {
    duration: 2000,
    transition: Fx.Transitions.Quint.easeIn,
    onComplete: function() {
        this.element.fade(this.element.getStyle("opacity") == 0 ? 1 : 0);
    }
}).fade(0);


document.id("stop").addEvent("click", function(e) {
    e.stop();
    fadeImg.get("tween").cancel();
});