10 examples of 'javascript fadeout' in JavaScript

9
export function fadeOut (element: HTMLElement, cb?: Function): void {
10
  let opacity: number = element.style.opacity ? +element.style.opacity : 0.9
11
12
  if (opacity > 0.05) {
13
    opacity -= 0.05
14
  } else if (opacity <= 0.1) {
15
    if (element.parentNode) {
16
      element.parentNode.removeChild(element)
17
      if (cb) cb()
18
    }
19
  } else {
20
    opacity = 0.9
21
  }
22
23
  element.style.opacity = opacity.toString()
24
  setTimeout(() => fadeOut.apply(this, [element, cb]), 1000 / 30
25
  )
26
}

636
value: function fadeOut(elem, duration, callback) {
637
    var _this = this;
638
639
    if (typeof duration === 'function') {
640
        callback = duration;
641
        duration = this._hideDuration;
642
    } else if (typeof duration !== 'number') {
643
        duration = this._hideDuration;
644
    }
645
646
    // 这里使用异步，是为了等待视图完全刷新到 100% 状态后在执行隐藏操作
647
    // 否则会出现视图在 99% 时，进度条就隐藏了
648
    setTimeout(function () {
649
        if (duration && _utils.support.transition) {
650
            // 如果之前调用过 fadeOut, 这里将生成的 this._fadeOutCallback 保存至 fadeOutCallback
651
            // 在新的 this._fadeOutCallback 开始执行时，先执行之前的 fadeOutCallback
652
            var fadeOutCallback = _this._fadeOutCallback;
653
            _this._fadeOutCallback = function () {
654
                fadeOutCallback && fadeOutCallback.call(_this);
655
                (0, _utils.css)(elem, 'display', 'none');
656
                (0, _utils.css)(elem, _utils.support.transition, '');
657
                (0, _utils.css)(elem, 'opacity', 1);
658
                callback && callback.call(_this);
659
                _this._fadeOutCallback = null;
660
            };
661
662
            (0, _utils.css)(elem, _utils.support.transition, 'opacity ' + duration + 'ms');
663
            (0, _utils.css)(elem, 'opacity', 0);
664
665
            if (_this._timerID > 0) clearTimeout(_this._timerID);
666
            _this._timerID = setTimeout(function () {
667
                _this._timerID = 0;
668
                _this._fadeOutCallback();
669
            }, 100000);
670
        } else {
671
            (0, _utils.css)(elem, 'display', 'none');
672
            callback && callback.call(_this);
673
        }
674
    });
675
676
    return this;
677
}

1
function fadeIn() {
2
	var h = document.querySelector(".picture");
3
	var opacity = parseFloat(h.style.opacity);
4
	if(opacity < 1) {
5
		opacity = opacity + 0.1;
6
		h.style.opacity = opacity;
7
		window.setTimeout(fadeIn, 33);
8
	}
9
}

66
fadeOut(postAction) {
67
    if (this.props.fadeOut === false) {
68
        postAction && postAction();
69
    } else {
70
        this.state.animatedValue.setValue(1);
71
        Animated.timing(this.state.animatedValue, {
72
            toValue: 0,
73
            duration: 300,
74
            useNativeDriver: true,
75
        }).start(postAction);
76
    }
77
}

232
(function fade() {
233
    var val = parseFloat(el.style.opacity);
234
    if (!((val += 0.1) > v)) {
235
        el.style.opacity = val;
236
        requestAnimationFrame(fade);
237
    }
238
})();

9
export function fadeOut(selectors, duration) {
10
    return $(selectors).fadeOut(duration);
11
}

72
function fadeIn(element, callback) {
73
    var currentOpacity = getStyle(element, 'opacity') || 1;
74
    var display = getStyle(element, 'display');
75
    if (display === 'none') {
76
        element.style.display = 'block';
77
        currentOpacity = 0;
78
    }
79
    var opacity = Number(currentOpacity) + fadingStep;
80
    element.style.opacity = opacity > 1 ? 1 : opacity;
81
    setTimeout(function () {
82
        if (opacity < 1) {
83
            fadeIn(element, callback);
84
        } else {
85
            typeof callback === 'function' && callback();
86
        }
87
    }, 10);
88
}

118
fadeOut() {
119
  return new Promise(resolve => this.transition_(new FadeOutState(this.moduleSM_, resolve)));
120
}

143
function fadeIn(volume) {
144
  for (var i = 1; i < fadeInArray.length; i++) {
145
    fadeInArray[i] = fadein[i] * volume;
146
  }
147
  return fadeInArray;
148
}

78
fadeOut () {
79
  this.innerEl.classList.remove('appear-anim')
80
}