JSFiddle - React, Tailwind, and code Playground

by Adnan Bilaç

HTML

<a href="#" id="parametresiz">Tıkla Değiştir</a><br>
<a href="#" id="parametreli">Tıkla Değiştir Parametreli</a>
<div id="kare"></div>

CSS

#kare{
        width: 100px;
        height: 100px;
        background-color: #ddd;
		left:5px;
    }

JavaScript

$.fn.degistir = function(settings){
	var varsayilan = {
		gorev : "renk",
		renk : "#000",
		genislik : "100px",
		zaman : 1000
		}
	
	$.extend(varsayilan,settings);
	
	return $(this).each(function(index, element) {
        if(varsayilan.gorev == "renk")
		{
			$(this).hide().css("background-color",varsayilan.renk).fadeIn();
		}
		else
		{
			$(this).animate({"width":varsayilan.genislik},varsayilan.zaman);
		}
    });
}

$(document).ready(function(){
    $("a#parametresiz").click(function(){
        $("#kare").degistir();
        return false;
    });
    
    $("a#parametreli").click(function(){
        $("#kare").degistir({gorev:"en"});
        return false;
    });
})