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

1. 您可以简单地使用for。

，而不是使用setTimeout()循环和setInterval。

2. 使用.offsetWidth，您可以获得width .track的像素，从中减去.follower的{​​{1}}并动画为新的值。

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

Answer 2

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

现在只需添加到您的代码中，您唯一需要的是减少跟随者的width：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;