· 8 years ago · Dec 24, 2017, 06:00 PM
1/*
2* jQuery css clip animation support -- Jim Palmer
3* version 0.1.2b
4* idea spawned from jquery.color.js by John Resig
5* Released under the MIT license.
6*/
7(function(jQuery) {
8
9 jQuery.fx.step.clip = function(fx) {
10
11 if (fx.state == 0) {
12
13 var clip, elem = $(fx.elem), cRE = /rect\(([0-9]{1,})(px|em)[,\s]+([0-9]{1,})(px|em)[,\s]+([0-9]{1,})(px|em)[,\s]+([0-9]{1,})(px|em)\)/;
14
15 clip = cRE.test(fx.elem.style.clip) ? fx.elem.style.clip : 'rect(0px ' + elem.width() + 'px ' + elem.height() + 'px 0px)';
16
17 fx.start = cRE.exec(clip.replace(/,/g, " "));
18
19 try {
20 fx.end = cRE.exec(fx.end.replace(/,/g, ''));
21 }
22 catch(event) {
23 return false;
24 }
25
26 }
27
28 var sarr = [], earr = [], spos = fx.start.length, epos = fx.end.length,
29 emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
30
31 for(var ss = 1; ss < spos; ss += 2) sarr[sarr.length] = parseInt(emOffset * fx.start[ss]);
32 for(var es = 1; es < epos; es += 2) earr[earr.length] = parseInt(emOffset * fx.end[es]);
33
34 fx.elem.style.clip = 'rect(' +
35 parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
36 parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
37 parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
38 parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
39 }
40
41})(jQuery);