JSFiddle - React, Tailwind, and code Playground

by Pantun

HTML

<p/>
<div>JAVASCRIPT</div>

CSS

div, p {
    position:fixed;
    top:50%;
    left:50%;
    right:50%;
    font-size:2em;
    margin:-50px 0 0 -100px
}
body { background:#eee }

JavaScript

$(document).ready(function(){
    var x = $('div').text();
    var charsLength = x.length - 1;
    for (i = charsLength; i >= 0; i--){
        $('p').append(x[i]);
        $('p').hide();
    }
    var y = $('p').text();
    $('div').hover(function(){
        $(this).html(y).hide().fadeIn("slow");
    }, function(){ 
        $(this).html(x).hide().fadeIn("medium");
    });
});
/*

.animate({ opacity: "show" }, { // complete // });

*/