js

global.js

$(document).ready(function() {

    $('#submit_item').click(function() {

        var item = $('#item').val();

        $.post("demo/process", {
                "item": item
            }, function(data) {
                console.log(data.result);
                $("#result").html(data.result);

            }, "json");



    });
});

// self invoking func
$(function(){
	//caching the object div.box
	var box = $('div.box'); // select specific div with class box
	

	$.fn.myFadeSlideToggle = function(speed, fn){
		console.log('inside myFadeSlideToggle');
		console.log($(this));// box
		// ps: always return jQuery obj from your plugins or methods
		return $(this).animate({
			// combine using toggle ('raw speaking' like display none)
			// 'height':0 keeps dysplay
			'height': 'toggle',
			opacity: 'toggle'
		}, speed || 300, function(){
			$.isFunction(fn) && fn.call(this);
		});
	}

	// creating the button event  click
	$('button').on('click', function() {
		// caching
		var result = $('span.result');
		var button = $(this);
		var speed = parseInt(button.text());
		result.text('');
		box.myFadeSlideToggle(speed, function(){
		result.text('complete');
		}); 
	});

})();