Skip to content

Instantly share code, notes, and snippets.

@lindsayevans
Last active December 15, 2015 17:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lindsayevans/5297183 to your computer and use it in GitHub Desktop.
Save lindsayevans/5297183 to your computer and use it in GitHub Desktop.
If you haven't felt the need to animate the tabindex attribute, you're not trying hard enough
/*!
* jQuery element attributes CSS hooks & animation support
*
* Copyright © 2013 Lindsay Evans <http://linz.id.au/>
* Licensed under the MIT <http://www.opensource.org/licenses/mit-license.php)> license.
*
* Why?
* Why not
*
* Usage:
* $('#foo').animate({'[border]': 10}, 'fast')
*
* TODO:
* - Round integers? Things like min, max, value can be floats; others should be ints
* - Deal with percentages (width etc.)
* - Deal with colours (mmmm... bgcolor animation...)
* - Any other silly deprecated attributes (hspace etc.)
*/
(function($){
if(!$.cssHooks){
throw('jQuery 1.4.3+ is needed for this plugin to work');
}
$(function(){
// Loop over attribute names
$.each([
'tabindex', // oh god why
'width','height', // <img>, <video> etc.
'border', 'span', 'rowspan', 'colspan', // <table>, <th>, <td>, etc.
'rows', 'cols', 'size', 'maxlength', 'value', 'min', 'max', 'step', // <input>, <textarea> etc.
'high', 'low', 'optimum', // <meter>
'start' // <ol>
], function(k, v){
// Property name is the attribute name wrapped in square brackets, CSS attribute selector style
var cssProperty = '[' + v + ']';
// Attributes shouldn't have 'px'
$.cssNumber[cssProperty] = true;
// Getter & setter for the attribute
$.cssHooks[cssProperty] = {
get: function(elem, computed, extra){
return elem[v];
},
set: function(elem, value){
elem[v] = value;
}
};
// Animation support for the attribute
$.fx.step[cssProperty] = function(fx){
$.cssHooks[cssProperty].set(fx.elem, fx.now);
};
});
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment