Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created October 23, 2010 02:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulirish/641692 to your computer and use it in GitHub Desktop.
Save paulirish/641692 to your computer and use it in GitHub Desktop.
// allow $('elem').css({ 'left' : '+=10px' });
// so you dont need to do:
// $('elem').animate({ 'left' : '+=10px' }, 0);
// by paul irish
// for ralph holzmann
// http://github.com/paulirish/lazyweb-requests/issues#issue/10
(function($, oldcss){
// magic from the core.
var rfxnum = /^([+\-]=)?([\d+.\-]+)(.*)$/;
$.fn.css = function(obj, val){
var parts = rfxnum.exec(val),
that = this;
if ($.isPlainObject(obj)){
$.each(obj, function(k, v){
$(that).css(k, v);
});
// here's the magic.
} else if (val && parts && parts[1]) {
var end = parseFloat(parts[2])
return oldcss.call(this, obj, function(index, currentValue){
return ((parts[1] === "-=" ? -1 : 1) * end) + parseFloat(currentValue);
});
// no fancypants
} else {
return oldcss.apply(this, arguments);
}
return this;
};
})(jQuery, jQuery.fn.css);
@shaneriley
Copy link

Why not use the callback function of the css method to increment values? Per the jQuery API example:
$('div.example').css('width', function(index) {
return index * 50;
});

@paulirish
Copy link
Author

That essentially what i'm doing. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment