Анимация в Internet Explorer
Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».
Пример:
Дело в том, что, если значение задано в процентах, оно пересчитывается в пикселях. Во всех современных браузерах для этого используется метод document.defaultView.getComputedStyle(), но в IE его конечно же нет. Для него используется метод, описанный здесь:
Но, как видно из регулярных выражений, пересчет идет только для положительных чисел. Таким образом, если значения разного знака, одно пересчитывается, другое – нет. Отсюда такой «скачок».
Исправить это можно, заменив 829 строку в исходном файле следующей:
Результат
* Source code was highlighted with Source Code Highlighter.
Пример:
<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;
}Но, как видно из регулярных выражений, пересчет идет только для положительных чисел. Таким образом, если значения разного знака, одно пересчитывается, другое – нет. Отсюда такой «скачок».
Исправить это можно, заменив 829 строку в исходном файле следующей:
if ( !/^\-?\d+(px)?$/i.test( ret ) && /^\-?\d/.test( ret ) ) {Результат
* Source code was highlighted with Source Code Highlighter.
комментарии (25)