不含JQuery的香草Javascript .fadein（）.fadeOut（）

Vishnu 发表于 Dev

毗湿奴

我正在为IE10 +开发，因此我决定不使用JQuery。我将自定义javascript函数编写为Select，Fadein，FadeOut等，并且工作正常。但是我喜欢使用JQuery样式的函数（Object.fadeIn（），Object.FadeOut（）等）。

我使用的不是JQuery Selector。

function _(el){
    return document.getElementById(el);
}

当我需要选择一个Dom对象时，我使用它。

var myButton = _("button");

当我需要淡入或淡出任何对象时，我可以使用它。

function fade(type, ms, el) {
  var isIn = type === 'in',
    opacity = isIn ? 0 : 1,
    interval = 50,
    duration = ms,
    gap = interval / duration;

  if(isIn) {
    el.style.display = 'inline';
    el.style.opacity = opacity;
  }

  function func() {
    opacity = isIn ? opacity + gap : opacity - gap;
    el.style.opacity = opacity;

    if(opacity <= 0) el.style.display = 'none'
    if(opacity <= 0 || opacity >= 1) window.clearInterval(fading);
  }

  var fading = window.setInterval(func, interval);

}

这是淡化我的按钮的特定代码

fade('out', 500, myButton);

我喜欢这样使用 _( "myButton" ).fadeIn( 100 );

更新：诀窍是使用原型函数“-”添加其他功能，例如fadein（），fadeOut（）。

琥珀灯

这将达到目的：

function _(el) {
  if (!(this instanceof _)) {
    return new _(el);
  }
  this.el = document.getElementById(el);
}

_.prototype.fade = function fade(type, ms) {
  var isIn = type === 'in',
    opacity = isIn ? 0 : 1,
    interval = 50,
    duration = ms,
    gap = interval / duration,
    self = this;

  if(isIn) {
    self.el.style.display = 'inline';
    self.el.style.opacity = opacity;
  }

  function func() {
    opacity = isIn ? opacity + gap : opacity - gap;
    self.el.style.opacity = opacity;

    if(opacity <= 0) self.el.style.display = 'none'
    if(opacity <= 0 || opacity >= 1) window.clearInterval(fading);
  }

  var fading = window.setInterval(func, interval);
}

_('myButton').fade('out', 500);