JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mylist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JavaScript

var Pusher = new Class({
        Implements: [Events,Options],
        options: {
            elements: []
        },

        initialize: function(options){
            this.setOptions(options);
            this.attachListeners(this.options.elements);
        },

        attachListeners: function(elements){
            $$(elements).each(function(el){
                $(el).addEvent('mouseover', this.pushIn.bind(this))
                     .addEvent('mouseout', this.pushOut.bind(this))
            }, this);
        },

        pushIn: function(event) {
            this.fireEvent('in');
            var item = event.target;
            item.set('tween', {duration: 'short'});
            item.tween('paddingLeft', '50px');
        },

        pushOut: function(event){
            var item = event.target;
            this.fireEvent('out');
            item.set('tween', {duration: 'short'});
            item.tween('paddingLeft', '0px');            
        }
    });

    window.addEvent('domready', function(){
        var p = new Pusher({
            elements: $$('li')
        });
        p.addEvent('in', function(){ alert('in'); });
        p.addEvent('out', function(){ alert('out'); });
    });