jQuery使用calc作为值(从百分比中减去px）对位置进行动画处理

jQuery animate position using calc as value (subtract px from percentage)

本文关键字：px 位置 处理 动画 calc 使用 百分比 jQuery      更新时间：2023-09-26
有点

令人困惑的标题，但问题是我们可以从.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中的百分比中获取像素？

@

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>

  1. 与其使用for循环和setTimeout()，不如简单地使用setInterval。

  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>

相关文章：