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可以理解的值。

＆＃13;

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 });
  }
})

＆＃13;

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

＆＃13;

Answer 2

以下是calc()的替代JavaScript。

基本上我用这一行计算我的vw单位值：

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

在这里工作小提琴。只需将time变量更改为0即可查看差异：

＆＃13;

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" });
}

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS calc（）和.animate（）

2 个答案: