Skip to content

Instantly share code, notes, and snippets.

@englishextra
Last active April 4, 2018 05:44
Show Gist options
  • Save englishextra/baaa687f6ae9c7733d560d3ec74815cd to your computer and use it in GitHub Desktop.
Save englishextra/baaa687f6ae9c7733d560d3ec74815cd to your computer and use it in GitHub Desktop.
modified implementing fadeIn and fadeOut without jQuery
/*!
* implementing fadeIn and fadeOut without jQuery
* gist.github.com/englishextra/baaa687f6ae9c7733d560d3ec74815cd
* modified jsfiddle.net/LzX4s/
* changed options.complete(); to:
* function"==typeof options.complete && options.complete();
* usage:
* FX.fadeIn(document.getElementById('test'),
* {duration:2000,complete:function(){alert('Complete');}});
*/
var FX = (function () {
var e = {
easing: {
linear: function (a) {
return a;
},
quadratic: function (a) {
return Math.pow(a, 2);
},
swing: function (a) {
return 0.5 - Math.cos(a * Math.PI) / 2;
},
circ: function (a) {
return 1 - Math.sin(Math.acos(a));
},
back: function (a, b) {
return Math.pow(a, 2) * ((b + 1) * a - b);
},
bounce: function (a) {
for (var b = 0, c = 1; ; b += c, c /= 2) {
if (a >= (7 - 4 * b) / 11) {
return -Math.pow((11 - 6 * b - 11 * a) / 4, 2) + Math.pow(c, 2);
}
}
},
elastic: function (a, b) {
return Math.pow(2, 10 * (a - 1)) * Math.cos(20 * Math.PI * b / 3 * a);
}
},
animate: function (a) {
if (a) {
var b = new Date(),
c = setInterval(function () {
var d = (new Date() - b) / a.duration;
if (1 < d) {
d = 1;
}
a.progress = d;
var e = a.delta(d);
a.step(e);
if (1 == d) {
clearInterval(c);
if ("function" === typeof a.complete) {
a.complete();
}
}
}, a.delay || 10);
}
},
fadeOut: function (a, b) {
if (a) {
this.animate({
duration: b.duration,
delta: function (a) {
a = this.progress;
return e.easing.swing(a);
},
complete: b.complete,
step: function (b) {
a.style.opacity = 1 - b;
}
});
}
},
fadeIn: function (a, b) {
if (a) {
this.animate({
duration: b.duration,
delta: function (a) {
a = this.progress;
return e.easing.swing(a);
},
complete: b.complete,
step: function (b) {
a.style.opacity = 0 + b;
}
});
}
}
};
return e;
})();
var a = document.getElementById('test');
FX.fadeIn(a, {
duration: 2000,
complete: function () {
alert('Complete');
}
});
setTimeout(function () {
FX.fadeOut(a, {
duration: 4000,
complete: function () {
alert('Complete');
}
})
}, 2000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment