Alternative jQuery Effect Methods

[hungle00]

jQuery provides some methods for creating animation effects and is easy to use.
For example:

• hide() / show()
• toggle()
• fadeIn()
• fadeOut()
• ...
  W3schools listed all Jquery here jQuery Effect Methods

But now jQuery seems to be out of date and in some projects, developers must replace jQuery code with pure JS or another library/framework.
It's effortless to create the function act the same as hide() / show(), just edit the display style

element.style.display = 'block' // or none

but with more complex effects, developers need to write more code.
Another problem is readable syntax, for example with the jQuery method

$(".myClass").slideDown();

is more beautiful and less verbose than the function with an element query.

const element = document.querySelector(".myClass");
slideToggle(element)

The trick here is to use HTMLElement.prototype to add a method to the HTML element and you can use the effect function as a method of the HTML element.

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

For reuse purposes, I created some vanilla JS methods for effects:

HTMLElement.prototype.slideToggle = function(duration) {
  if (window.getComputedStyle(this).display === 'none') {
    _slideDown(this);
  } else {
    _slideUp(this);
  }
};

HTMLElement.prototype.slideUp = function(duration) {
  _slideUp(this)
};

HTMLElement.prototype.slideDown = function (duration) {
  _slideDown(this)
};

HTMLElement.prototype.toggle = function() {
  if(this.style.display === 'none') {
    this.show();
  } else {
    this.hide();
  }
}

HTMLElement.prototype.show = function() {
  this.style.display = 'block'
}

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

HTMLElement.prototype.fadeIn = function(display) {
  _fadeIn(this, display)
}

HTMLElement.prototype.fadeOut = function() {
  _fadeOut(this)
}


function _slideUp(element, duration = 500) {
  const target = element;
  target.style.transitionProperty = 'height, margin, padding';
  target.style.transitionDuration = `${duration}ms`;
  target.style.boxSizing = 'border-box';
  target.style.height = `${target.offsetHeight}px`;
  target.offsetHeight;
  target.style.overflow = 'hidden';
  target.style.height = 0;
  target.style.paddingTop = 0;
  target.style.paddingBottom = 0;
  target.style.marginTop = 0;
  target.style.marginBottom = 0;
  window.setTimeout(() => {
    target.style.display = 'none';
    target.style.removeProperty('height');
    target.style.removeProperty('padding-top');
    target.style.removeProperty('padding-bottom');
    target.style.removeProperty('margin-top');
    target.style.removeProperty('margin-bottom');
    target.style.removeProperty('overflow');
    target.style.removeProperty('transition-duration');
    target.style.removeProperty('transition-property');
  }, duration);
}

function _slideDown(element, duration = 500) {
  const target = element;
  target.style.removeProperty('display');
  let display = window.getComputedStyle(target).display;
  if (display === 'none') { display = 'block'; }
  target.style.display = display;
  const height = target.offsetHeight;
  target.style.overflow = 'hidden';
  target.style.height = 0;
  target.style.paddingTop = 0;
  target.style.paddingBottom = 0;
  target.style.marginTop = 0;
  target.style.marginBottom = 0;
  target.offsetHeight;
  target.style.boxSizing = 'border-box';
  target.style.transitionProperty = 'height, margin, padding';
  target.style.transitionDuration = `${duration}ms`;
  target.style.height = `${height}px`;
  target.style.removeProperty('padding-top');
  target.style.removeProperty('padding-bottom');
  target.style.removeProperty('margin-top');
  target.style.removeProperty('margin-bottom');
  window.setTimeout(() => {
    target.style.removeProperty('height');
    target.style.removeProperty('overflow');
    target.style.removeProperty('transition-duration');
    target.style.removeProperty('transition-property');
  }, duration);
}


// ** FADE OUT FUNCTION **
function _fadeOut(el) {
  el.style.opacity = 1;
  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
        el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
};

// ** FADE IN FUNCTION **
function _fadeIn(el, display) {
  el.style.opacity = 0;
  el.style.display = display || "block";
  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += 0.05) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
};