jquery - 提高边框渐变的动画速度

Question

我有一个悬停动画。其中动画速度太慢。我想提高动画速度。我认为我们必须提高边界填充速度。但我不知道我该怎么做。我已经更改了一些属性，但注意正在工作。

var i = 0,
  prec;
var degs = $("#prec").attr("class").split(' ')[1];
var activeBorder = $("#activeBorder");

setTimeout(function() {
  if ($("#circle").is(":hover"))
    loopit("c");
  else
    loopit("nc");
}, 1);

function loopit(dir) {
  if (dir == "c")
    i++
    else
      i--;
  if (i < 0)
    i = 0;
  if (i > degs)
    i = degs;
  prec = (100 * i) / 360;
  $(".prec").html("<i class='fa fa-facebook'></i>");

  if (i <= 180) {
    activeBorder.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  } else {
    activeBorder.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  }

  setTimeout(function() {
    if ($("#circle").is(":hover"))
      loopit("c");
    else
      loopit("nc");
  }, 1);

}

.prec {
  top: 30px;
  position: relative;
  font-size: 30px;
}
.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #E6F4F7;
}
.active-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: #39B4CC;
  background-image: linear-gradient(180deg, transparent 50%, #999 50%), linear-gradient(180deg, #999 50%, transparent 50%);
  z-index: 99999
}
.active-border i {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="activeBorder" class="active-border">
  <div id="circle" class="circle">
    <span class="prec 360" id="prec">test</span>
  </div>
</div>

Answer 1

这些运算符(在您的 loopit 函数的开头)更改圆的位置:

if (dir == "c")
    i++;
else
    i--;

通过改变它们变化的量，您可以改变圆圈填充/清空的速度。例如:

if (dir == "c")
    i += 10;
else
    i -= 10;

比您展示的示例快 10 倍。

var i = 0,
  prec;
var degs = $("#prec").attr("class").split(' ')[1];
var activeBorder = $("#activeBorder");

setTimeout(function() {
  if ($("#circle").is(":hover"))
    loopit("c");
  else
    loopit("nc");
}, 1);

function loopit(dir) {
  if (dir == "c")
    i += 10;
  else
    i -= 10;
  if (i < 0)
    i = 0;
  if (i > degs)
    i = degs;
  prec = (100 * i) / 360;
  $(".prec").html("<i class='fa fa-facebook'></i>");

  if (i <= 180) {
    activeBorder.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  } else {
    activeBorder.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  }

  setTimeout(function() {
    if ($("#circle").is(":hover"))
      loopit("c");
    else
      loopit("nc");
  }, 1);

}

.prec {
  top: 30px;
  position: relative;
  font-size: 30px;
}
.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #E6F4F7;
}
.active-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: #39B4CC;
  background-image: linear-gradient(180deg, transparent 50%, #999 50%), linear-gradient(180deg, #999 50%, transparent 50%);
  z-index: 99999
}
.active-border i {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="activeBorder" class="active-border">
  <div id="circle" class="circle">
    <span class="prec 360" id="prec">test</span>
  </div>
</div>