将 CSS calc() 与 .animate() 一起使用答案

【问题标题】：Using CSS calc() with .animate()将 CSS calc() 与 .animate() 一起使用
【发布时间】：2017-12-25 23:52:40
【问题描述】：

我正在尝试制作一个小动画，但我未能使其响应，因为“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() 的情况下以另一种方式响应？

【问题讨论】：

jQuery 不理解calc()，它只理解数字
不，calc() 不适用于animate()，但是我确信无论您尝试做什么，都有另一种方法。您能否更新问题以详细说明您要达到的效果。
像你想要的那样设置 calc() 是行不通的。最简单的方法是将其值“计算”到变量中。
可以使用 CSS 变量和 jq-cssvar 和 CSS 过渡（通过 JQuery 代替动画）
哦，对了，@VilleKoo 这可能是一个很好的解决方案，我会试试的！向大家致意，感谢您的宝贵时间。

标签： jquery css jquery-animate css-calc

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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>

【讨论】：