使用 calc 作为值的 jQuery 动画位置（从百分比中减去 px）

Question

有点令人困惑的标题，但问题是我们可以从.animate 内的百分比中提取像素吗？我在下面创建了一个示例。

$(document).ready(function() {
  // Set the percentage off
  loading();
});

function loading() {
  var num = 0;

  for (i = 0; i <= 100; i++) {
    setTimeout(function() {

      $('.follower').animate({
        left: num + "%"
      }, 40, "linear");

      num++;
    }, i * 50);
  };

}

.track {
  width: 90%;
  height: 40px;
  background: #999;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}
.follower {
  width: 60px;
  height: 20px;
  border: 1px solid;
  border-radius: 10px;
  background: #222;
  position: absolute;
  top: 54px;
  left: 100%;
}
.follower:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #222;
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  margin: auto;
}

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

<div class="track">
  <div class="follower"></div>
</div>

您可以看到.follower 正在按预期工作，但我需要它上方的那个小点来​​开始.track 开始的地方并结束.track 结束的地方。

所以我必须将其在 jQuery 中移动的百分比的宽度占.follower 的一半，但我找不到这样做的方法。我环顾四周，有一些方法可以使用 .css 等，但使用 .animate 时没有。

在使用.animate时，我们如何在jQuery中从百分比中获取像素？

Answer 1

来自@chipChocolate.py 的好回答 ....

现在要添加到您的代码中，您唯一需要的是减去关注者的width：

$(document).ready(function() {
  // Set the percentage off
  loading();
});

function loading() {
  //Create a var to set the value percentage to dismiss
  var rest = ($('.follower').width()*100) / $('.track').width(),
  //Then rest it from the initial value
      num = 0 - (rest/2);
  console.log(rest);
  for (i = 0; i <= 100; i++) {
    setTimeout(function() {
      $('.follower').animate({
        left: num + "%"
      }, 40, "linear");
      num++;
    }, i * 50);
  };
}

.track {
  width: 90%;
  height: 40px;
  background: #999;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}
.follower {
  width: 60px;
  height: 20px;
  border: 1px solid;
  border-radius: 10px;
  background: #222;
  position: absolute;
  top: 54px;
  left: 0;
}
.follower:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #222;
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  margin: auto;
}

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

<div class="track">
  <div class="follower"></div>
</div>

Answer 2

1. 您可以简单地使用setInterval，而不是使用for 循环和setTimeout()。

2. 使用.offsetWidth，您可以获得.track 中的width（以像素为单位），从中减去.follower 的width 并生成新值。

var follower = document.getElementsByClassName('follower')[0];
var track = document.getElementsByClassName('track')[0];
var tW;
var num = 0;
var percentage = 50;

function loading() {
  var num = 0;
  tW = (percentage * (track.offsetWidth - follower.offsetWidth)) / 100;
  var anim = setInterval(function() {
    follower.style.left = num++ + 'px';
    if (num > tW) {
      clearInterval(anim);
    }
  }, 10);
}
function resizeHandler() {
  tW = (percentage * (track.offsetWidth - follower.offsetWidth)) / 100;
  follower.style.left = tW + 'px';
}
window.onresize = resizeHandler;
loading()

.track {
  width: 90%;
  height: 40px;
  background: #999;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}
.follower {
  width: 60px;
  height: 20px;
  border: 1px solid;
  border-radius: 10px;
  background: #222;
  position: absolute;
  top: 54px;
  left: 100%;
}
.follower:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #222;
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  margin: auto;
}

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

<div class="track">
  <div class="follower"></div>
</div>