Использование CSS calc() с.animate()

Question

Я пытаюсь сделать небольшую анимацию, но мне не удается сделать ее отзывчивой, потому что "calc()", похоже, не работает с.animate. Есть ли другое решение здесь?

if (time == 1) {
  $("#message").animate({ marginTop: "calc(-15px + .8vw)" });
} else {
  $("#message").animate({ marginTop: "calc(0px + .8vw)" });
}

С наилучшими пожеланиями, BERNARDO

РЕДАКТИРОВАТЬ: я пытаюсь анимировать сообщение, которое появляется на моем сайте onchange() из выпадающего меню. Это должно быть отзывчивым, поэтому я использую calc().

<a>Time: </a><select id="time" onchange="setTime()" name="time" required>
                    <option value="1" selected>-</option>
                    <option value="3">-</option>
              </select></br>

Так есть ли альтернатива, чтобы сделать его отзывчивым по-другому без calc()?

Answer 1

Поскольку vw является единицей измерения, равной 1% ширины области просмотра, мы можем рассчитать calc() заявления в значение, которое JQuery может понять.

var time = true

$('#toggle').click(function () {
  time = !time;
  
  if (time === true) {
    // calc(-15px + .8vw)
    var calc = -15 + (0.08 * $(window).width()) + "px";
    $("#message").animate({ marginTop: calc });
  } else {
    // calc(0px + .8vw)
    var calc = 0 + (0.08 * $(window).width()) + "px";
    $("#message").animate({ marginTop: calc });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Toggle</button>
<div id="message">Message</div>

Answer 2

Вот альтернатива JavaScript для calc(),

В основном я вычисляю свои значения на VW с помощью этой строки:

var vw_value = $(window).width() / 100 * 0.8;

Рабочая скрипка здесь. Просто измените time переменная в 0, чтобы увидеть разницу:

var time = 0;

var vw_value = $(window).width() / 100 * 0.8;

if (time == 1) {
  $("#one").animate({ marginTop: vw_value - 15 + "px" });
} else {
  $("#one").animate({ marginTop: vw_value + "px" });
}

body{
    margin:0;
    padding:0;
}
#one{
    margin-top:0;
    width: 40px;
    background:grey;
    height:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>