Поэтому у меня есть div со следующим css:

#MyDiv {
    position: absolute;
    overflow: visible;
    top: 0px;
    right: 50%;
    width: 49%;
    height: 99%;
    min-width: 250px;
    min-height: 400px;
    max-width: 400px;
    max-height: 500px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 0 auto;
    padding: 0px;
}

И я оживляю его с помощью jquery на 800 пикселей. В Firefox конечная позиция является желаемой, однако в Chrome и Opera это неправильно.

    alert($("#MyDiv").position().left);
    $("#MyDiv").animate({left: "+=" + 800 + "px"}, 1000, "linear", function() {
        alert($("#MyDiv").position().left);
    });

В Firefox начальная левая позиция - 23 (первое предупреждение), а последние 823 (второе предупреждение) в Chrome и Opera - конечная позиция 800

Я делаю что-то неправильно? Существует требование, чтобы сохранить CSS без изменений.

Постскриптум ie8 также имеет некоторые проблемы, но в меньшей степени, чем Chrome и Opera

Заранее спасибо.

изменить jsfiddle: http://jsfiddle.net/Q8K2R/

0
MirrorMirror 29 Янв 2013 в 01:44

2 ответа

Лучший ответ

Другой способ - установить атрибут css left, потому что анимация работает с css, и здесь нет гарантии, что левый атрибут содержит правильные вычисленные данные, поэтому fix может быть как

var mydiv=$("#MyDiv");
mydiv.css({left: mydiv.position().left});

Прежде чем одушевить DEMO

1
zb' 28 Янв 2013 в 22:50

Почему бы вам просто не рассчитать позицию перед анимацией стиля:

`var _left = $("#MyDiv").position().left + 800 + 'px';
$("#MyDiv").animate({left: _left}, 1000, "linear", function() {
    alert($("#MyDiv").position().left);
}); `   
0
famu1hundred 28 Янв 2013 в 21:51