JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div id="blah">Hello world</div>

CSS

#blah {
    width: 200px;
    height: 200px;
    background-color: red;
    border-left: 5px solid blue;
    border-right: 10px solid blue;
}

JavaScript

(function($) {
	var $blockCache = null;
	var ops = {};

	$.fn.jax = function(ajax, options) {
		ops = $.extend({}, $.fn.jax.defaults, options);

		var complete = function(){};
		if(typeof(ajax.complete) === "function")
			complete = ajax.complete;
		ajax.complete = function() {
			stopLoading();
			complete();
		};
		startLoading(this);
		$.ajax(ajax);
	}

	function startLoading($container) {
		var $block = $('<div></div>');
		$container.css('position', 'relative');
		var hBorder = parseFloat($container.css('border-left-width')) * -1;
        var vBorder = parseFloat($container.css('border-top-width')) * -1;
		$block.css({
			'width': $container.outerWidth(),
			'height': $container.outerHeight(),
			'position': 'absolute',
			'top': vBorder,
			'left': hBorder,
			'opacity': 0,
			'background-color': '#000000'
		});
		$block.appendTo($container);
		$block.animate({
			'opacity': ops.opacityStart
		},
		ops.animationSpeed);
		$blockCache = $block;
	};

	function stopLoading() {
		$blockCache.animate({
			'opacity': 0
		}, ops.animationSpeed, function() {
			$blockCache.remove();
		});
	};

	$.fn.jax.defaults = {
		'animationSpeed': 400,
		'opacityStart': 0.5
	};

}(jQuery));


$(function() {
	$('#blah').jax({
	    'type': 'GET',
	    'url': 'http://www.whitehouse.gov/facts/json/all/all',
	    'dataType': 'jsonp',
	    'crossDomain': true,
        'jsonpCallback': 'callbackJ'
	});
    
    function callbackJ(data) {
        alert('Yay');
    }
});