JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target" style="width:150px;height:150px;background:red;">
    Test
</div>
<input type="button" value="test" id="btn" />

JavaScript

$.fn.myFadeIn = function(){
    var item = this , time = 500;
    item.show();
    item.css("opacity",0);
    
    for(var i = 0 ; i <= 100 ; i +=10){
        (function(ind){ //use ind to protect variable "i",or it will always be 100
            $("#target").queue("fadeIn",function(next){
                item.css("opacity", ind/100  );        
                setTimeout(next,time);
            });
        })(i);
    }
    $("#target").dequeue("fadeIn");
    item.html("fadeIn invoked");
}
    
$("#btn").click(function(){
   $("#target").myFadeIn();//invoking the $.fn.myFadeIn
});