Увеличить скорость анимации градиента границы

У меня есть анимация при наведении. В котором скорость анимации слишком медленная. Я хочу увеличить скорость анимации. Я думаю, мы должны увеличить скорость заполнения границы. Но я не могу понять, как я могу это сделать. Я изменил некоторые свойства, но заметил, что это работает.

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>


animation jquery css
person user3396867    schedule 12.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эти операторы (в начале вашей функции 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>

person ricky3350    schedule 12.12.2015
comment
Большое спасибо. спас мою жизнь ! - person user3396867; 12.12.2015
comment
как я могу использовать этот код juqery несколько раз? Я копирую и вставляю jquery и меняю идентификатор тега html. но работает только последний - person user3396867; 12.12.2015
comment
@user3396867 user3396867 Я не очень хорошо знаком с jQuery, больше с js в целом, поэтому, к сожалению, я не могу вам помочь с этим вопросом. Вместо этого попробуйте опубликовать другой вопрос. - person ricky3350; 12.12.2015