Устранить проблемы с анимацией в настройках дисплея монитора

Question

У меня проблема с анимацией на веб-странице. У меня есть этот div с текстом внутри него, что я устанавливаю поле с помощью css, и когда страница загружается, я использую jquery для анимации div для определенной части страницы. Проблема в том, что он работает с моими конкретными настройками пикселей, но если я изменяю свойства настроек дисплея монитора в разрешении экрана (в пикселях), div не анимируется в соответствующее место и даже не запускается в соответствующем месте из css.

Пример кода:

#div{
position:absolute;
top:20px;
left:50px
}

$("#div").animate({marginLeft: "250px"},2000);

Есть ли способ получить настройки конца поля анимации в соответствующей позиции независимо от разрешения экрана?

Answer 1

Мне удалось найти решение, но я не был уверен, является ли решение оптимальным или разумным. По сути, я настроил , если условие для всех различных настроек разрешения экрана, и у каждого из них есть свои параметры. Пример:

if(screen.width==1600&& screen.height==960)
{
   $("#div").animate({marginLeft: "350px"},2000);
}
if(screen.width==1250&& screen.height==7500)
{
   $("#div").animate({marginLeft: "570px"},2000);
}
etc..

Answer 2

Вы анимируете свойство margin-left вместо свойства left position. Я думаю, что если вы переключитесь на это, вы получите желаемый результат.

Также вы можете назначить ширину для #div, так как большую часть времени элементы с абсолютным позиционированием лучше работают с шириной.