使用 CSS calc() 和 .animate()

Question

我正在尝试制作一个小动画，但未能使其响应，因为 "calc()" 似乎不适用于 .animate。这里有其他解决方案吗？

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

谨致最诚挚的问候，贝尔纳多

编辑：我正在尝试为显示在我的网站上的下拉菜单的 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

这是 calc() 的 JavaScript 替代方法。

基本上我用这条线计算我的大众单位值：

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

在这里工作fiddle。只需将 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>

Answer 2

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

使用 CSS calc() 和 .animate()

Using CSS calc() with .animate()

jquery

css

jquery-animate

css-calc