JSFiddle - React, Tailwind, and code Playground
HTML
The numbers are printed by the callback inside the setInterval call. The cb is being printed in our callback override function.
<div id="element"></div>
CSS
#element { width: 25%; background-color: #abcdef; }
JavaScript
var toggle=0;
setInterval(function() {
var method = ++toggle%2?'expand_to_parent_container':'contract_to_original_size';
$("#element")[method](500, function() { $(this).append(toggle+' '); });
}, 1000);
jQuery.fn.expand_to_parent_container = function() {
// instead of Array.prototype, we can grab slice from an empty array []
var args = [].slice.call(arguments);
return this.each(function(){
var parent = $(this).parent();
parent.inner_width = parent.innerWidth();
var inner_outer_differential = $(this).outerWidth(true) - $(this).width();
// store original width for reversion later
if (!$(this).data('original_width'))
{
$(this).data('original_width', $(this).width());
}
args.unshift({ width: parent.inner_width - inner_outer_differential });
$.fn.animate.apply($(this), args );
args.shift(); // push the width object back off in case we have multiples
});
}
jQuery.fn.contract_to_original_size = function() {
var args = Array.prototype.slice.call(arguments);
var callback;
var callback_with_width_reset = function(){
if (callback) callback.apply(this,arguments);
// for the demo:
$(this).append('cb ');
// $(this).width('auto');
// you may want to $(this).data('original-width', null); here as well?
}
args = $.map(args, function(param) {
// if the parameter is a function, replace it with our callback
if ($.isFunction(param)) {
// and save the original callback to be called.
callback = param;
return callback_with_width_reset;
}
// don't change the other params
return param;
});
// we didn't find a callback already in the arguments
if (!callback) {
args.push(callback_with_width_reset);
}
return this.each(function() {
// rather than shift() the new value off after each loop
// this is another technique you could use:
// create another copy so we can mess with it and keep our template
var localArgs...