javascript - 没有 JQuery 的 Vanilla Javascript .fadein() .fadeOut()

<分区>

我正在为 IE10+ 开发，所以我决定不使用 JQuery。我为 Select、Fadein、FadeOut 等编写了自定义 javascript 函数，并且工作正常。但我喜欢使用 JQuery 风格的函数(Object.fadeIn()、Object.FadeOut() 等)。

我使用这个代替 JQuery 选择器。

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 );

Update: The trick was to use prototype function for "-" to add additional functionality like 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);

从现在开始，您可以使用任何类似 jQuery 的函数扩展您的 _ 对象。

关于javascript - 没有 JQuery 的 Vanilla Javascript .fadein() .fadeOut()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30206054/

上一篇：javascript - 默认情况下限制所有 observable 的速率

下一篇：javascript - 希望使用 angularjs 创建类似功能的 gmail 附件预览

javascript - 我是否需要为 Angular 2 中的每个模块添加一个插件？

javascript - 通过字符串从对象中提取数据

javascript - 从textarea到div的文本具有有限的宽度和高度

javascript - p5.js 中向量数组的问题

javascript - parseInt 在获取整数数组中的第一个值后返回 NaN

javascript - 正则表达式查找句子中的最后一个单词

javascript - Jquery Javascript 对象 - 将某些值与另一个类似对象进行比较并替换

javascript - 如何在 SQL 中保存 OFFSET 的当前状态

JavaScript cookie 显示出不同的性质