(function($){ $.fx.step.clip = function(fx){ var elem = fx.elem, $elem = $(elem); if(fx.start === 'rect(0px, 0px, 0px, 0px)' || fx.start === 0) { fx.start = "rect(" + parseFloat(elem.scrollTop) + ", " + elem.scrollWidth + ", "+ elem.scrollHeight + ", " + elem.scrollLeft + ')'; } else { fx.start = $elem.css('clip'); } var calcRect = function(pos){ var arr = [], rect = fx[pos].slice(5).split(' '); for (var i = 0; i < rect.length; i++) { arr.push(rect[i]); } return arr; }; var sa = calcRect('start'), ea = calcRect('end'); var perc = fx.pos; elem.style.clip = 'rect(' + ( perc * (ea[0] - sa[0]) ) + sa[0] + fx.unit + ', ' + ( perc * (ea[1] - sa[1]) ) + sa[1] + fx.unit + ', ' + ( perc * (ea[2] - sa[2]) ) + sa[2] + fx.unit + ', ' + ( perc * (ea[3] - sa[3]) ) + sa[3] + fx.unit + ')'; }; }(jQuery));