Meningkatkan kecepatan animasi gradien perbatasan

Saya memiliki animasi hover. Dimana kecepatan animasinya terlalu lambat. Saya ingin meningkatkan kecepatan animasi. Saya pikir kita harus meningkatkan kecepatan pengisian perbatasan. Tapi saya tidak tahu bagaimana saya bisa melakukan itu. Saya telah mengubah beberapa properti tetapi catatannya berfungsi.

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 sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Operator berikut (di awal fungsi loopit Anda) mengubah posisi lingkaran:

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

Dengan mengubah jumlah perubahannya, Anda mengubah kecepatan pengisian/pengosongan lingkaran. Misalnya:

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

10 kali lebih cepat dari contoh yang Anda tunjukkan.

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
Terima kasih banyak. menyelamatkan hidupku! - person user3396867; 12.12.2015
comment
bagaimana saya bisa menggunakan kode juqery ini berkali-kali? Saya menyalin dan menempelkan jquery dan mengubah id tag html. tapi hanya yang terakhir yang berfungsi - person user3396867; 12.12.2015
comment
@ user3396867 Saya tidak terlalu paham dengan jQuery, lebih banyak js secara umum, dan sayangnya saya tidak dapat membantu Anda dengan pertanyaan itu. Coba kirimkan pertanyaan lain sebagai gantinya. - person ricky3350; 12.12.2015