Как создать эквивалентную функцию fadeOut jQuery?

Question

[Outoverlay]

Смотрел исходники jQuery, там очень много кода, начиная fadeOut: { opacity: "hide" },
заканчивая jquery.speed и jquery.animation. Попробовал создать что-то по своей логике - Вышло:

function fadeOut(time){
var opacity,
timelength = '' + time,
i;
d='';
for( var i = 0; i <= timelength.length-2; i++ ){
d+='0';
}
s = timelength.substring(0,1);
timez = s + d;
console.log(timez);
timeOne = '0.'+d+'1';
timec = '0.'+time;
timelength = timelength.length;

each(function(){
ele = this;
setInterval(function(){
opacity = getComputedStyle(ele).opacity;
if(opacity == 0){
ele.style.opacity = 'none';
ele.style.display = 'none';
return ele;
}else{
ele.style.opacity = opacity - timeOne;
}
}, time);

});
}

Проблема в скорости срабатывания работает не по времени.

Answer 1

[twobomb]

Вот я сделал свой fadeOut посмотри может понравится
https://jsfiddle.net/6g8u0qsw/4/

Comments

[Outoverlay]

Да круто)

[Outoverlay]

Но, нет такой плавности например при time = 200

[twobomb]

Outoverlay: Какая речь может идти о плавности при 200? Ведь это 5-я часть секунды, твои глаза воспринимают всего 24 кадра в секунду, то есть ты видишь 4-5 кадров этой анимации. У меня все сделано очень плавно и намного лучше чем в jquery, так как у меня стоит setTimeout 0. Это значит что функция без задержки начинает выполнятся заново что обеспечивает максимальную точно, чем круче твой процессор тем быстрее, точнее и плавнее все просчитается, но такая точность тут в принципе и не нужна так как глаз не успевает реагировать. Вот можешь сравнить мой fadeout(сверху) и jquery. https://jsfiddle.net/twobomb/6g8u0qsw/7/

[Outoverlay]

twobomb: setInterval - 0(большая нагрузка на странице)

[Outoverlay]

twobomb: Вот более продвинутый вариант

fade = function(type, el, duration, IEsupport){


var isIn = (type == 'in'),
IE = (IEsupport) ? IEsupport : false,
opacity = isIn ? 0 : 1,
interval = 50,
gap = interval / duration;

if(isIn) {
el.style.display = 'block';
el.style.opacity = opacity;
if(IE) {
el.style.filter = 'alpha(opacity=' + opacity + ')';
el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')';
}
}

function func() {
opacity = isIn ? opacity + gap : opacity - gap;
el.style.opacity = opacity;
if(IE) {
el.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')';
}
if(opacity <= 0){
el.style.opacity = 0; window.clearInterval(fading);
}else if(opacity >= 1){
el.style.opacity = 1; window.clearInterval(fading);
}
if(opacity <= 0) { el.style.display = "none"; }
console.log(new Date());
}
var fading = window.setInterval(func, interval);
};

[twobomb]

Outoverlay: Я тебе просто для примера написал, могу его продвинуть еще хоть куда

Answer 2

[Super User]

По принципу FadeIn предложенный на сайте You Might Not Need JQuery

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}

fadeIn(el);