CURRENT PROJECTS
loading
CATEGORIES AND POSTS
loading
overset
DEVELOPMENT LOG FOR JIM PALMER
Posted 08/07/2008 in jquery


Missing from the default jQuery 1.2.6 effects and the 1.5 jQuery UI is the ability to animate on the clip style property. Here's a simple jQuery 1.2.6 "plugin" to extend the animate function to support animation of the clip property. This was built off the same principle found in eJohn's jquery.color.js plugin which supports animation of color styles.
/*
 * jQuery css clip animation support -- Jim Palmer
 * version 0.1.2
 * idea spawned from jquery.color.js by John Resig
 * Released under the MIT license.
 */
(function(jQuery){
	jQuery.fx.step.clip = function(fx){
		if ( fx.state == 0 ) {
			var cRE = /rect\(([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)\)/;
			fx.start = cRE.exec( fx.elem.style.clip.replace(/,/g, '') );
			fx.end = cRE.exec( fx.end.replace(/,/g, '') );
		}
		var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
			emOffset = fx.start[ss+1] == 'em' ? ( parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss]) ) : 1;
		for ( var ss = 1; ss < spos; ss+=2 ) { sarr.push( parseInt( emOffset * fx.start[ss] ) ); }
		for ( var es = 1; es < epos; es+=2 ) { earr.push( parseInt( emOffset * fx.end[es] ) ); }
		fx.elem.style.clip = 'rect(' + 
			parseInt( ( fx.pos * ( earr[0] - sarr[0] ) ) + sarr[0] ) + 'px ' + 
			parseInt( ( fx.pos * ( earr[1] - sarr[1] ) ) + sarr[1] ) + 'px ' +
			parseInt( ( fx.pos * ( earr[2] - sarr[2] ) ) + sarr[2] ) + 'px ' + 
			parseInt( ( fx.pos * ( earr[3] - sarr[3] ) ) + sarr[3] ) + 'px)';
	}
})(jQuery);
DEMO
Here's a dynamically embedded demo using a small picture form Mildred Lake. Click the FULL, HALF, GONE buttons to see the animation in action:


Link to demo alone

NOTE
Whatever object you wish to use this animate plugin on requires the clip style to be defined before you run the animate on it. Just as long as the style is computed correctly, it can be either inline or cascaded. If you do not set a clip style (with px or em units for this version) before using the animate you will see a "fx.start is null" error (n FF).
comments
loading
new comment
NAME
EMAIL ME ON UPDATES
EMAIL (hidden)
URL
MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br>
PREVIEW COMMENT
TURING TEST
gravatar