Tetingkap prapemuat animasi pembilang nombor apabila memuatkan Javascript Html CSS

Question

Saya ingin mencipta animasi pembilang nombor di laman web portfolio saya. Saya mempunyai beberapa kod jquery dalam laman web lama saya yang beralih daripada pramuat ke laman web apabila dimuatkan sepenuhnya.

<script>
  $(window).on('load', () => {
    $('#preloader').fadeOut(1800, function() {
      $(this).remove();
    });
  });
    </script>

Bagaimana untuk menambah animasi pembilang nombor dan menambah peralihan sisi atas? Terima kasih

P粉497463473 · Answer

Inilah.

Umumkan kiraan.
Kurangkan nilai kiraan.
Berdasarkan nilai pembilang slideUp您的div和删除Span pembilang.

Contoh:

$(window).on('load', () => {
  let count = 3;
  function ShowCounter() {
    if (count > 0) {
      $("#spnNumber").fadeOut('slow', function() {
        $("#spnNumber").text(count);
        $("#spnNumber").fadeIn();
        count--;
      });

    } else if (count == 0) {
      $("#preloader").slideUp();
      $("#spnNumber").remove();
      clearInterval(interval);

    }

  }
  var interval = setInterval(function() {
    ShowCounter()
  }, 1000)
});


Loading ...