JSFiddle - React, Tailwind, and code Playground

by sedran

HTML

<div id="area"></div>
<p>
    <button id="animate">Animate</button>
    <button id="attachBlueMaker">Attach Blue Makaer</button>
    <button id="attachFadeToggler">Attach Fade Toggler</button>
    <button id="detachBlueMaker">Detach Blue Makaer</button>
    <button id="detachFadeToggler">Detach Fade Toggler</button>
</p>

CSS

#area {
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #900;
}

JavaScript

$(document).ready(function () {
    function blueMaker() {
        $("#area").css("backgroundColor", "#009");
        setTimeout(function () {
            $("#area").css("backgroundColor", "#900");
        }, 600);
    }
    
    function fadeToggler() {
        $("#area").fadeOut(300, function () {
            $("#area").fadeIn(300);
        });
    }
    
    // Mavileşme efekti ekleyelim    
    $("#attachBlueMaker").click(function () {
        $("#animate").bind('click', blueMaker);
    });
    
    // Gizle/Göster efekti ekleyelim
    $("#attachFadeToggler").click(function () {
        $("#animate").bind('click', fadeToggler);
    });
    
    // Mavileşme efektini kaldıralım
    $("#detachBlueMaker").click(function () {
        $("#animate").unbind('click', blueMaker);
    });
    
    // Gizle/Göster efektini kaldıralım
    $("#detachFadeToggler").click(function () {
        $("#animate").unbind('click', fadeToggler);
    });
});