JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<div>hello!!</div>

CSS

div {
        background:darkblue;
        position:relative;
        color:#fff;
        float:left;
    }

JavaScript

/*$('div').animate({
    'top': 50,
        'left': 60
}, 500, function () {
    console.log(this);
    animateArray.apply(this, [
        [{
            'top': '100',
                'font-size': '0.3em',
                'dur': 1000
        }, {
            'left': 400,
                'dur': 4000,
            'opacity': 0.2
        }, {
            'font-size': '5em',
                'dur': 3000,
            'opacity': 1
        }, {
            'left': '-=100'
        }, {
            'color': 'red'
        }]
    ]);
});*/
// Create closure.
(function ($) {

    // Plugin definition.

    $.fn.arrAnimate = function (arr) {
        return this.each(function (_, el) {
            for (var i = 0; i < arr.length; i++) {
                console.log(arr);                        
                $(el).animate(arr[i], arr[i]['dur']);
            }
        });
    };
    // End of closure.
})(jQuery);
$('div').arrAnimate([
    [{
        'top': '100',
            'font-size': '0.3em',
            'dur': 1000
    }, {
        'left': 400,
            'dur': 4000,
            'opacity': 0.2
    }, {
        'font-size': '5em',
            'dur': 3000,
            'opacity': 1
    }, {
        'left': '-=100'
    }, {
        'color': 'red'
    }]
]);