Internet Explorer Animation

Not the first time I come across this problem, but various “crutches” usually helped out. Now I decided to figure it out. The point is this: if in animation the initial and final values ​​are in percentages and different signs, the object will “twitch”.

Example :

< style type ="text/css" >
#div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</ style >

< script type ="text/javascript" >
$( function (){
$( '#link-1' ).click( function (e){
e.preventDefault();
$( '#div-1' ).animate({ left: '25%' });
});
$( '#link-2' ).click( function (e){
e.preventDefault();
$( '#div-1' ).animate({ left: '-25%' });
});
});
</ script >

< div id ="div-1" style ="left: -25%;" ></ div >
< a href ="#" id ="link-1" > Animate to 25% </ a >
< a href ="#" id ="link-2" > Animate to -25% </ a >

The fact is that if a value is given as a percentage, it is recalculated in pixels. In all modern browsers, the document.defaultView.getComputedStyle () method is used for this, but of course not in IE. It uses the method described here :

// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;

// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px" ;

// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}

But, as can be seen from regular expressions, recalculation is only for positive numbers. Thus, if the values ​​are of a different sign, one is recalculated, the other is not. From here such "jump".
')
You can fix this by replacing line 829 in the source file with the following:

if ( !/^\-?\d+(px)?$/i.test( ret ) && /^\-?\d/.test( ret ) ) {

Result

* Source code was highlighted with Source Code Highlighter .