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

问题描述

一个令人困惑的标题，但问题是我们可以从.animate中的某个百分比中删除像素吗?我在下面创建了一个示例.

Bit of a confusing title but the question is can we take pixels away from a percentage inside .animate? I have created an example below.

$(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的结束.

You can see .follower is working as intended but I need that little point above it to start where .track starts and to finish where .track ends.

因此，我必须采用.follower宽度在jQuery中移动的百分比的一半，但是我找不到一种方法来做到这一点.我环顾四周，有使用.css等方法的方法，但是使用.animate时什么也没有.

So I have to take half of .follower width of the percentage it has moved in the jQuery but I cannot find a way to do this. I have looked around and there are ways using .css etc but nothing when using .animate.

当使用.animate时，如何从jQuery中的百分比中获取像素?

How how we take pixels from a percentage in jQuery when using .animate?

推荐答案

来自@ chipChocolate.py ....

Nice answer from @chipChocolate.py ....

现在仅将代码添加到您的代码中，您唯一需要做的就是减去关注者的width:

Now to add just to your code the only thing you need is substract the width of the follower:

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

这篇关于使用calc作为值的jQuery动画位置(从百分比中减去px)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！