JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<p>Кликаем по каждому прямоугольнику:</p>
<div class="test">1</div>
<div class="test">2</div>
<div id="id1">3</div>
<div id="id2">4</div>

CSS

div {
    position: relative;
    width: 200px;
    height: 50px;
    margin: 5px;
    border: 1px solid #900;
}

JavaScript

$.fn.slider = function(optUser) {
    
    var MyPlugin = function(el,opt){
        
        settings = $.extend({
            speed: 1000
        }, opt);
                
        $(el).animate({
            left: '+=100'
        }, settings.speed).text('Скорость: ' + settings.speed);        
    };
    
    var getObj = function(){
        $(this).click(function(){
            MyPlugin(this, optUser);
        });
    };
    
    return this.each(getObj);
};

$('.test').slider({
    speed: 2000
});
$('#id1').slider({
    speed: 100
});
$('#id2').slider({
    speed: 500
});