How to use

animate

function

in

JQuery

// 上に戻るボタン
 $(document).on('click', '.fixed-action-btn:eq(1) a', function() {
  const has = $('main').hasClass('tab-fixed');
  const trg = (!has) ? 'main' : '.contents';
  $(trg).animate({
   'scrollTop': 0
  }, 300);
 });

/* This results in a very small delay for the end user but it allows the animation to be
     * much smoother. If you don't want the animation, then the setTimeout can be removed
     */
    setTimeout( function () {
      $(nHidden).animate({"opacity": 1}, 500);
      $(nBackground).animate({"opacity": 0.25}, 500);
    }, 10 );

selector.each(function(i, element) {
      elements.push($(element));
      $(element).data("scrollSpy:id", i);
      // Smooth scroll to section
     $('a[href="#' + $(element).attr('id') + '"]').click(function(e) {
      e.preventDefault();
      var offset = $(Materialize.escapeHash(this.hash)).offset().top + 1;
      $('html, body').animate({ scrollTop: offset - options.scrollOffset }, {duration: 400, queue: false, easing: 'easeOutCubic'});
     });
    });

function goToInvoices(id) {
    let margin = id * -100 + '%';
    $('.wrapper').animate({
    marginLeft: margin
    }, 0);
  }

//Menu item click
 $('a.scrollitem').click(function() {
  $('a.scrollitem').removeClass('selected');
  $(this).addClass('selected');
  let slideNumber = $($(this).attr('href')).index('.page'),
  margin = slideNumber * -100 + '%';
  $('.wrapper').animate({
  marginLeft: margin
  }, 100);

  return false;
});

$('.count').each(function () {
  const $this = $(this);
  jQuery({Counter: 0}).animate({Counter: parseInt($this.text())}, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      if ($this.text() === 0) $this.text(0); else $this.text(Math.ceil(this.Counter).toLocaleString());
    }
  });
});

$(document).ready(function () {
  if (window.location.hash) {
    $('html,body').animate({
      scrollTop: $(window.location.hash).offset().top - 140
    }, 400, 'swing');
  }
});

$(window).on('hashchange', function (event) {
  event.preventDefault();
  $('html,body').animate({
    scrollTop: $(window.location.hash).offset().top - 140
  }, 400, 'swing');
});

$(this.dom.collection.background).animate({"opacity": 0}, 500, function (e) {
        this.parentNode.removeChild( this );
      } );

//Cancel button click
  $('#cancel').click(() => {
  let margin = 2 * -100 + '%';
  $('.wrapper').animate({
   marginLeft: margin
  }, 200);
 });

$(this.dom.collection.collection).animate({"opacity": 0}, 500, function (e) {
        this.style.display = "none";
      } );

/* This results in a very small delay for the end user but it allows the animation to be
     * much smoother. If you don't want the animation, then the setTimeout can be removed
     */
    setTimeout( function () {
      $(nHidden).animate({"opacity": 1}, 500);
      $(nBackground).animate({"opacity": 0.25}, 500);
    }, 10 );

// 上に戻るボタン
 $(document).on('click', '.fixed-action-btn:eq(1) a', function() {
  const has = $('main').hasClass('tab-fixed');
  const trg = (!has) ? 'main' : '.contents';
  $(trg).animate({
   'scrollTop': 0
  }, 300);
 });

selector.each(function (i, element) {
   elements.push($(element));
   $(element).data("scrollSpy:id", i);
   // Smooth scroll to section
   $('a[href="#' + $(element).attr('id') + '"]').click(function (e) {
    e.preventDefault();
    var offset = $(Materialize.escapeHash(this.hash)).offset().top + 1;
    $('html, body').animate({ scrollTop: offset - options.scrollOffset }, { duration: 400, queue: false, easing: 'easeOutCubic' });
   });
  });

$(this.dom.collection.collection).animate({"opacity": 0}, 500, function (e) {
        this.style.display = "none";
      } );