JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <body>
        <div id="anim1">Click me</div>
        <div id="anim2">Click me</div>
    </body>
</html>

CSS

#anim1, #anim2 {
    width:10%;
    height:50px;
    position:absolute;
    left:50%;
    top: 10px;
    background:green;
    margin-left:-5%;
    opacity: .9;
}
#anim2 {
    top:100px;
}

JavaScript

$(function() {
    var t1 =true,
        t2 = true,
        t3 = true;
    $('#anim1').click(function() {
        $(this).animate({
            left: t1 ? 30 : '50%'
        }, 500);
        t1 = !t1;
    });
    $('#anim2').click(function() {
        $(this).animate({
            opacity: t2 ? .7 : .9
        }, 500);
        t2 = !t2;
    });
});