Internet Explorerのアニメーション

この問題に遭遇したのはこれが初めてではありませんが、通常はさまざまな「割れ目」が助けになりました。 今、私はそれを理解することにしました。 一番下の行は次のとおりです。アニメーションで初期値と最終値がパーセントで異なる記号である場合、オブジェクトは「ひきつり」ます。



例 ：

< 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 >

実際、値がパーセンテージで指定されている場合、ピクセル単位で変換されます。 最近のすべてのブラウザーでは、document.defaultView.getComputedStyle（）メソッドがこれに使用されますが、もちろんIEにはありません。 ここで説明する方法が使用されます ：

// 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;

}

ただし、正規表現からわかるように、再カウントは正の数値に対してのみ行われます。 したがって、異なる符号の値が再計算された場合、1つは再計算され、もう1つは再計算されません。 したがって、そのような「飛躍」。



これを修正するには、ソースファイルの829行を次の行に置き換えます。

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

結果



*ソースコードはソースコードハイライターで強調表示されました。