We Keep Coding

fadeIn and fadeOut in javascript

I'm trying to write my own animations using JavaScript.
I wrote a function for fadeIn() as below, it changes the display property followed by a change in value of opacity. But it doesn't seem to be working.
What am I doing wrong?
function fadeIn(obj, defDisp) {
obj.style.opacity = 0;
obj.style.display = defDisp;
var opVal = 0;
while (opVal < 1) {
obj.style.opacity = opVal;
opVal += 0.1;
}
}
defDisp = Default value for display property

Without a timing interval, this will likely execute too fast for you to see it. The while loop, without a timeout feature, will execute in far less than a second, and you won't see it happen. It's like asking a computer to count to 10, it will do it in less than a millisecond.
Try using a setTimeout
http://www.w3schools.com/jsref/met_win_settimeout.asp
while(opVal < 1) {
setTimeout(function(){
obj.style.opacity = opVal;
opVal += 0.1;
}, 3000);
}
Alter the timer (3000 in this case) to something that makes your fade work for you. Every 1000 is a one second and your loop runs 10 times, so in this case it would be 30 seconds, likely too slow.
I would probably stick with a CSS transition however, as they tend to render better on all browsers.

var el = document.getElementById('fadein');
fadeIn(el);
function fadeIn(ele, defDisp) {
ele.style.opacity = 0;
ele.style.display = defDisp;
var opVal = 0;
var t = setInterval(function(){
if(opVal >= 1){
clearInterval(t);
}
ele.style.opacity = opVal;
opVal += 0.1;
}, 100);
}
#fadein{ background: #ccc; border:1px solid #ddd; padding: 10px }
<div id="fadein">Hello</div>

Use a function that calls itself after a delay.
function fadeIn(obj, defDisp) {
obj.style.opacity = 0;
obj.style.display = defDisp;
var last = +new Date(); // Keep track of the time to calculate the opacity
var fadeStep = function () {
obj.style.opacity = +obj.style.opacity + (new Date() - last) / 800;
last = +new Date();
if (+obj.style.opacity < 1) {
setTimeout(fadeStep, 16);
}
};
fadeStep();
}
var el = document.getElementById('box');
fadeIn(el, 'block');
#box{ padding: 1em; background: #009afd; color: #ffffff; display: none; }
<div id="box">Hello</div>
If you want the fade to be faster, replace 800 by anything lower and vice-versa.

Because html render and for loop use the same thread, so when you doing the for-loop,you can't see any changes until the function complete. You have to use a setTimeout or setInterval (or requestAnimationFrame which is introduced from html5) so you browser can have the control to change the properties on the page:
You can see a example from the snippet, although the second that use a setTimeout is faster than the first one, which use for loop, the first one will not change its color as browser not able to change color during for-loop.
And if you choose to use requestAnimationFrame like I do in the snippets, you can have a smooth animation while the time can also be controlled precisely.
function fadeIn() {
this.style.opacity = 0;
this.style.display = 'block';
var opVal = 0;
console.time("count");
while(opVal < 1) {
this.style.opacity = opVal;
opVal += 0.000001;
}
console.timeEnd("count");
}
// Accept target as the target to apply anim, time is total anim time in ms.
function fadeInAlt(target, time) {
var opacity = 0;
var last = window.performance.now();
console.time("count2");
target.style.opacity = opacity;
target.style.display = 'block';
var fadeInFunc = function(timeStamp) {
if (opacity < 1) {
// Define the change by passed time.
var timePassed = timeStamp - last;
opacity += timePassed / time;
target.style.opacity = opacity;
last = timeStamp;
requestAnimationFrame(fadeInFunc);
} else {
console.timeEnd("count2");
return;
}
};
requestAnimationFrame(fadeInFunc);
}
var div = document.getElementById('test');
div.onclick = fadeIn;
var div2 = document.getElementById('test2');
div2.onclick = function() {
fadeInAlt(this, 3000);
};
#test {
background-color: red;
width: 30px;
height:30px;
}
#test2 {
background-color: blue;
width: 30px;
height:30px;
}
<div id="test"></div>
<div id="test2"></div>

Javascript div fade in not working using setInterval

I'm trying to make a div containing a number of pictures to fade in but its not working and I don't know why. I believe that the inverval is not even being called. The div's opacity is set to 0.0 This is the code:
var movies = getElementById("movies");
var apparence = function(){
if(movies.style.opacity < 1.0){
movies.style.opacity = movies.style.opacity + 0.1;
} else { clearInterval(timer);
}
}
var timer = window.setInterval(apparence, 1000);
Thank you very much.

To set your movies var, you need to call:
document.getElementById('movies');
The way you are attempting to increment opacity didn't work, so I've updated your example.
New Code:
var movies = document.getElementById("movies");
var opacity = 0.1;
var apparence = function(){
if(opacity <= 1.0) {
movies.style.opacity = opacity;
} else {
clearInterval(timer);
}
opacity += 0.1;
}
var timer = window.setInterval(apparence, 1000);
JS Fiddle:
http://jsfiddle.net/onov6cq4/1/

Here is your problem
Problem1:
If you have defined your css using
#movies {
opacity: 0.0;
}
then document.getElementById().style.opacity is empty since it takes from inline style i.e. <div id="movies" style="opacity: 0.0">
Problem 2:
movies.style.opacity = movies.style.opacity + 0.1;
movies.style.opacity returns a string so you are basically appending string which results in 0.10.1 and so on. You need to do parseFloat! The attached fiddle will solve your problem
Code:
var moviesOp = document.getElementById('movies').style.opacity;
function apparence(){
console.log('interval called with op = ' + moviesOp);
if(moviesOp < 1.0){
moviesOp = parseFloat(moviesOp, 10) + 0.1;
} else {
clearInterval(timer);
}
}
var timer = setInterval(apparence, 1000);
<div id="movies" style="opacity: 0.0">
JSBin With Inline Style
If you want to use in css and not inline then use getComputedStyle. This i tried and works as u wanted
var movies = document.getElementById('movies');
function apparence(){
var moviesOp = getComputedStyle(movies).getPropertyValue('opacity');
console.log('interval called with op = ' + moviesOp);
if(moviesOp < 1.0){
movies.style.opacity = parseFloat(moviesOp, 10) + 0.1;
} else {
clearInterval(timer);
}
}
var timer = setInterval(apparence, 1000);
Non Inline jsBin

Javascript fade in fade out without Jquery and CSS3

I am really squeezing my head to make the simple fade in and fade out of the background image work only with javascript without JQuery and CSS3. I know how easy is to call a fadeIn() and fadeOut() in Jquery. Unfortunately in my project I am working, they don't support Jquery. I want to support the animation from IE6 for your info.
On click of the links the corresponding background of the div to be faded in and out from the previously existing background. I am trying to make it work based on setinterval but could not do it.
function handleClick(evt){
var element = document.getElementsByClassName(evt.target.id);
fade(element);
}
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
​
http://jsfiddle.net/meetravi/2Pd6e/4/

Here are my full implementations of fadeIn and fadeOut for cross-browser support (including IE6) which does not require jQuery or any other 3rd-party JS library:
function fadeIn( elem, ms )
{
if( ! elem )
return;
elem.style.opacity = 0;
elem.style.filter = "alpha(opacity=0)";
elem.style.display = "inline-block";
elem.style.visibility = "visible";
if( ms )
{
var opacity = 0;
var timer = setInterval( function() {
opacity += 50 / ms;
if( opacity >= 1 )
{
clearInterval(timer);
opacity = 1;
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 );
}
else
{
elem.style.opacity = 1;
elem.style.filter = "alpha(opacity=1)";
}
}
function fadeOut( elem, ms )
{
if( ! elem )
return;
if( ms )
{
var opacity = 1;
var timer = setInterval( function() {
opacity -= 50 / ms;
if( opacity <= 0 )
{
clearInterval(timer);
opacity = 0;
elem.style.display = "none";
elem.style.visibility = "hidden";
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 );
}
else
{
elem.style.opacity = 0;
elem.style.filter = "alpha(opacity=0)";
elem.style.display = "none";
elem.style.visibility = "hidden";
}
}
As others have said, you need to fix your handleClick to properly select a single element, then pass that element to the fade function (which I named fadeOut for clarity). The default time for a jQuery fade is 400ms, so if you want to mimic that, your call might look like this:
function handleClick( evt )
{
fadeOut( document.getElementById(evt.target.id), 400 );
}

getElementById givies you one element (or null), getElementsByClassName gives an array.
function handleClick(evt){
var element = document.getElementById(evt.target.id);
fade(element);
}
You seem to aim for usage of ID's, so this should answer your needs. I updated the whole thing: IDs
However, you should realize that this method of fading is much more costly than using GPU accelerated transitions.
Update
JSfiddle webkit opacity fade

If you do not care about IE7 - IE9, you can use very useful CSS3 transitions, something like this:
.element {
-webkit-transition: opacity 0.3s ease;
}
.element[faded=true] {
opacity: 0;
}
You will get very fast, native fade out effect without jQuery.
UPDATE:
Sorry, i hadn't read quiestion title thoroughly.

element.style is undefined because you're not referencing the correct object. Use element[0] for your function call:
function handleClick(evt){
var element = document.getElementsByClassName(evt.target.id);
fade(element[0]);
}
Fiddle
Side note: Using console.log() and some type of developer console (like the one included in Chrome) can work wonders for debugging.

You should really do this via CSS3 since all modern browsers support it, and for older browsers fallback to just using show/hide. Do this by adding a "fadeOut" class or removing it via JavaScript. CSS3 (transitions) handle everything else, including hiding and showing it for older browsers.
Remember: As much as possible, do things in CSS before doing them in JavaScript. Not only is it cleaner and easier to maintain but CSS3 animations render smoother as it often hardnesses the GPU (video card) and not just the CPU. This is especially important on mobile devices but is the standard, modern way for doing it in any device.
See this Opera article for greater detail:
http://dev.opera.com/articles/view/css3-show-and-hide/

I'll point you off in the right direction and leave the rest of the coding to you.
This is how the setInterval() function works. It takes a function to execute and then the milliseconds it should run for.
setInterval(function() {
if(fade(element[0]))
clearInterval();
}, 50);
I made a JS fiddle for you here It's semicomplete but shows off how you should go about making your fadeout/fadein.
This is tested in Chrome on a Mac. Not sure about FF nor IE unfortunately.
Also as several pointed out, when getting stuff by any function that ends with s you can be 100% sure that it gives you an array with elements and thus you have to refer to the element you want as such. In your case its element[0].
Hope I help you further a little ways! :) Good luck!

For a Single Function to toggle Fade IN or Out depending the case, here's my function
function toggleFade(elem, speed ) {
//Add Opacity Property if it doesnt exist
if (!elem.style.opacity) elem.style.opacity = 1;
if (elem.style.opacity <= 0) {
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
}else{ // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0)
clearInterval(outInterval);
}, speed/50 );
}
}

I modified the function of #Raptor007
if (!Element.prototype.fadeIn) {
Element.prototype.fadeIn = function(){
let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
func = typeof arguments[0] === 'function' ? arguments[0] : (
typeof arguments[1] === 'function' ? arguments[1] : null
);
this.style.opacity = 0;
this.style.filter = "alpha(opacity=0)";
this.style.display = "inline-block";
this.style.visibility = "visible";
let $this = this,
opacity = 0,
timer = setInterval(function() {
opacity += 50 / ms;
if( opacity >= 1 ) {
clearInterval(timer);
opacity = 1;
if (func) func('done!');
}
$this.style.opacity = opacity;
$this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 );
}
}
if (!Element.prototype.fadeOut) {
Element.prototype.fadeOut = function(){
let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
func = typeof arguments[0] === 'function' ? arguments[0] : (
typeof arguments[1] === 'function' ? arguments[1] : null
);
let $this = this,
opacity = 1,
timer = setInterval( function() {
opacity -= 50 / ms;
if( opacity <= 0 ) {
clearInterval(timer);
opacity = 0;
$this.style.display = "none";
$this.style.visibility = "hidden";
if (func) func('done!');
}
$this.style.opacity = opacity;
$this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 );
}
}
How to use:
// fadeIn with default: 400ms
document.getElementById(evt.target.id).fadeIn();
// Calls the "alert" function with the message "done!" after 400ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(alert);
// Calls the "alert" function with the message "done!" after 1500ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(1500, alert);
JSfiddle fadeIn / fadeOut example

How to do fade-in and fade-out with JavaScript and CSS

I want to make an HTML div tag fade in and fade out.
I have some code that fades out, but when I fade in, the opacity of the div stays at 0.1 and doesn't increase.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Fade to Black</title>
<script type="text/javascript">
//<![CDATA[
function slidePanel(elementToSlide, slideSource)
{
var element = document.getElementById(elementToSlide);
if(element.up == null || element.up == false) {
setTimeout("fadeOut(\"" + elementToSlide + "\")", 100);
element.up = true;
slideSource.innerHTML = "Bring it down";
} else {
setTimeout("fadeIn(\"" + elementToSlide + "\")", 100);
element.up = false;
slideSource.innerHTML = "Take it up";
}
}
function fadeIn(elementToFade)
{
var element = document.getElementById(elementToFade);
element.style.opacity += 0.1;
if(element.style.opacity > 1.0) {
element.style.opacity = 1.0;
} else {
setTimeout("fadeIn(\"" + elementToFade + "\")", 100);
}
}
function fadeOut(elementToFade)
{
var element = document.getElementById(elementToFade);
element.style.opacity -= 0.1;
if(element.style.opacity < 0.0) {
element.style.opacity = 0.0;
} else {
setTimeout("fadeOut(\"" + elementToFade + "\")", 100);
}
}
//]]>
</script>
</head>
<body>
<div>
<div id="slideSource"
style="width:150px; height:20px;
text-align:center; background:green"
onclick="slidePanel('panel', this)">
Take It up
</div>
<div id="panel"
style="width:150px; height:130px;
text-align:center; background:red;
opacity:1.0;">
Contents
</div>
</div>
</body>
</html>
What am I doing wrong and what is the best way to fade in and fade out an element?

Here is a more efficient way of fading out an element:
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
you can do the reverse for fade in
setInterval or setTimeout should not get a string as argument
google the evils of eval to know why
And here is a more efficient way of fading in an element.
function unfade(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}

Here is a simplified running example of Seattle Ninja's solution.
var slideSource = document.getElementById('slideSource');
document.getElementById('handle').onclick = function () {
slideSource.classList.toggle('fade');
}
#slideSource {
opacity: 1;
transition: opacity 1s;
}
#slideSource.fade {
opacity: 0;
}
<button id="handle">Fade</button>
<div id="slideSource">Whatever you want here - images or text</div>

why do that to yourself?
jQuery:
$("#element").fadeOut();
$("#element").fadeIn();
I think that's easier.
www.jquery.com

Here's my attempt with Javascript and CSS3 animation
So the HTML:
<div id="handle">Fade</div>
<div id="slideSource">Whatever you want images or text here</div>
The CSS3 with transitions:
div#slideSource {
opacity:1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
transition: opacity 3s;
}
div#slideSource.fade {
opacity:0;
}
The Javascript part. Check if the className exists, if it does then add the class and transitions.
document.getElementById('handle').onclick = function(){
if(slideSource.className){
document.getElementById('slideSource').className = '';
} else {
document.getElementById('slideSource').className = 'fade';
}
}
Just click and it will fade in and out. I would recommend using JQuery as Itai Sagi mentioned. I left out Opera and MS, so I would recommend using prefixr to add that in the css. This is my first time posting on stackoverflow but it should work fine.

Ok, I've worked it out
element.style.opacity = parseFloat(element.style.opacity) + 0.1;
Should be used instead of
element.style.opacity += 0.1;
Same with
element.style.opacity = parseFloat(element.style.opacity) - 0.1;
Instead of
element.style.opacity -= 0.1;
Because opacity value is stored as string, not as float. I'm still not sure though why the addition has worked.

I usually use these utility functions. element is the HTML element and duration is the desired duration in milliseconds.
export const fadeIn = (element, duration) => {
(function increment(value = 0) {
element.style.opacity = String(value);
if (element.style.opacity !== '1') {
setTimeout(() => {
increment(value + 0.1);
}, duration / 10);
}
})();
};
export const fadeOut = (element, duration) => {
(function decrement() {
(element.style.opacity -= 0.1) < 0 ? element.style.display = 'none' : setTimeout(() => {
decrement();
}, duration / 10);
})();
};

Heres my code for a fade in/out toggle functions.
fadeIn: function (len) {
var obj = this.e;
obj.style.display = '';
var op = 0;
var timer = setInterval(function () {
if (op >= 1 || op >= 1.0){
console.log('done', op)
clearInterval(timer);
}
obj.style.opacity = op.toFixed(1);
op += 0.1;
console.log(obj.style.opacity);
}, len);
return this;
},
fadeOut: function (len) {
var obj = this.e;
var op = 1;
var timer = setInterval(function () {
if (op <= 0){
clearInterval(timer);
console.log('done', op)
obj.style.display = 'none';
}
obj.style.opacity = op.toFixed(1);
op -= 0.1;
console.log(obj.style.opacity)
}, len);
return this;
},
This was from a jQuery style lib i did. hope it's helpfull. link to lib on cloud9:
https://c9.io/christopherdumas/magik_wb

I like Ibu's one but, I think I have a better solution using his idea.
//Fade In.
element.style.opacity = 0;
var Op1 = 0;
var Op2 = 1;
var foo1, foo2;
foo1 = setInterval(Timer1, 20);
function Timer1()
{
element.style.opacity = Op1;
Op1 = Op1 + .01;
console.log(Op1); //Option, but I recommend it for testing purposes.
if (Op1 > 1)
{
clearInterval(foo1);
foo2 = setInterval(Timer3, 20);
}
}
This solution uses a additional equation unlike Ibu's solution, which used a multiplicative equation. The way it works is it takes a time increment (t), an opacity increment (o), and a opacity limit (l) in the equation, which is: (T = time of fade in miliseconds) [T = (l/o)*t]. the "20" represents the time increments or intervals (t), the ".01" represents the opacity increments (o), and the 1 represents the opacity limit (l). When you plug the numbers in the equation you get 2000 milliseconds (or 2 seconds). Here is the console log:
0.01
0.02
0.03
0.04
0.05
0.060000000000000005
0.07
0.08
0.09
0.09999999999999999
0.10999999999999999
0.11999999999999998
0.12999999999999998
0.13999999999999999
0.15
0.16
0.17
0.18000000000000002
0.19000000000000003
0.20000000000000004
0.21000000000000005
0.22000000000000006
0.23000000000000007
0.24000000000000007
0.25000000000000006
0.26000000000000006
0.2700000000000001
0.2800000000000001
0.2900000000000001
0.3000000000000001
0.3100000000000001
0.3200000000000001
0.3300000000000001
0.34000000000000014
0.35000000000000014
0.36000000000000015
0.37000000000000016
0.38000000000000017
0.3900000000000002
0.4000000000000002
0.4100000000000002
0.4200000000000002
0.4300000000000002
0.4400000000000002
0.45000000000000023
0.46000000000000024
0.47000000000000025
0.48000000000000026
0.49000000000000027
0.5000000000000002
0.5100000000000002
0.5200000000000002
0.5300000000000002
0.5400000000000003
0.5500000000000003
0.5600000000000003
0.5700000000000003
0.5800000000000003
0.5900000000000003
0.6000000000000003
0.6100000000000003
0.6200000000000003
0.6300000000000003
0.6400000000000003
0.6500000000000004
0.6600000000000004
0.6700000000000004
0.6800000000000004
0.6900000000000004
0.7000000000000004
0.7100000000000004
0.7200000000000004
0.7300000000000004
0.7400000000000004
0.7500000000000004
0.7600000000000005
0.7700000000000005
0.7800000000000005
0.7900000000000005
0.8000000000000005
0.8100000000000005
0.8200000000000005
0.8300000000000005
0.8400000000000005
0.8500000000000005
0.8600000000000005
0.8700000000000006
0.8800000000000006
0.8900000000000006
0.9000000000000006
0.9100000000000006
0.9200000000000006
0.9300000000000006
0.9400000000000006
0.9500000000000006
0.9600000000000006
0.9700000000000006
0.9800000000000006
0.9900000000000007
1.0000000000000007
1.0100000000000007
Notice how the opacity follows the opacity increment amount of .01 just like in the code. If you use the code Ibu made,
//I made slight edits but keeped the ESSENTIAL stuff in it.
var op = 0.01; // initial opacity
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
op += op * 0.1;
}, 20);
you will get these numbers (or something similar) in you console log. Here is what I got.
0.0101
0.010201
0.01030301
0.0104060401
0.010510100501
0.010615201506009999
0.0107213535210701
0.0108285670562808
0.010936852726843608
0.011046221254112044
0.011156683466653165
0.011268250301319695
0.011380932804332892
0.01149474213237622
0.011609689553699983
0.011725786449236983
0.011843044313729352
0.011961474756866645
0.012081089504435313
0.012201900399479666
0.012323919403474463
0.012447158597509207
0.0125716301834843
0.012697346485319142
0.012824319950172334
0.012952563149674056
0.013082088781170797
0.013212909668982505
0.01334503876567233
0.013478489153329052
0.013613274044862343
0.013749406785310966
0.013886900853164076
0.014025769861695717
0.014166027560312674
0.014307687835915801
0.01445076471427496
0.01459527236141771
0.014741225085031886
0.014888637335882205
0.015037523709241028
0.015187898946333437
0.01533977793579677
0.015493175715154739
0.015648107472306286
0.01580458854702935
0.015962634432499644
0.01612226077682464
0.016283483384592887
0.016446318218438817
0.016610781400623206
0.01677688921462944
0.016944658106775732
0.01711410468784349
0.017285245734721923
0.017458098192069144
0.017632679173989835
0.01780900596572973
0.01798709602538703
0.018166966985640902
0.01834863665549731
0.018532123022052285
0.018717444252272807
0.018904618694795535
0.01909366488174349
0.019284601530560927
0.019477447545866538
0.0196722220213252
0.019868944241538455
0.02006763368395384
0.02026831002079338
0.020470993121001313
0.020675703052211326
0.02088246008273344
0.021091284683560776
0.021302197530396385
0.02151521950570035
0.021730371700757353
0.021947675417764927
0.022167152171942577
0.022388823693662
0.022612711930598623
0.022838839049904608
0.023067227440403654
0.02329789971480769
0.023530878711955767
0.023766187499075324
0.024003849374066077
0.02424388786780674
0.024486326746484807
0.024731190013949654
0.024978501914089152
0.025228286933230044
0.025480569802562344
0.025735375500587968
0.025992729255593847
0.026252656548149785
0.026515183113631283
0.026780334944767597
0.027048138294215273
0.027318619677157426
0.027591805873929
0.02786772393266829
0.028146401171994972
0.028427865183714922
0.02871214383555207
0.02899926527390759
0.029289257926646668
0.029582150505913136
0.029877972010972267
0.030176751731081992
0.030478519248392812
0.03078330444087674
0.031091137485285508
0.031402048860138365
0.03171606934873975
0.03203323004222715
0.03235356234264942
0.03267709796607591
0.03300386894573667
0.03333390763519403
0.03366724671154597
0.03400391917866143
0.03434395837044805
0.03468739795415253
0.03503427193369406
0.035384614653031
0.035738460799561306
0.03609584540755692
0.03645680386163249
0.03682137190024882
0.03718958561925131
0.03756148147544382
0.03793709629019826
0.03831646725310024
0.038699631925631243
0.03908662824488755
0.039477494527336426
0.03987226947260979
0.040270992167335894
0.04067370208900925
0.04108043910989934
0.04149124350099834
0.04190615593600832
0.042325217495368404
0.04274846967032209
0.04317595436702531
0.04360771391069556
0.044043791049802515
0.04448422896030054
0.04492907124990354
0.04537836196240258
0.045832145582026605
0.04629046703784687
0.04675337170822534
0.047220905425307595
0.04769311447956067
0.04817004562435628
0.04865174608059984
0.04913826354140584
0.0496296461768199
0.0501259426385881
0.05062720206497398
0.05113347408562372
0.05164480882647996
0.05216125691474476
0.05268286948389221
0.053209698178731134
0.05374179516051845
0.05427921311212363
0.05482200524324487
0.05537022529567732
0.05592392754863409
0.056483166824120426
0.05704799849236163
0.05761847847728525
0.0581946632620581
0.05877660989467868
0.059364375993625464
0.05995801975356172
0.060557599951097336
0.06116317595060831
0.06177480771011439
0.06239255578721554
0.0630164813450877
0.06364664615853857
0.06428311262012396
0.0649259437463252
0.06557520318378844
0.06623095521562633
0.0668932647677826
0.06756219741546042
0.06823781938961503
0.06892019758351117
0.06960939955934628
0.07030549355493974
0.07100854849048914
0.07171863397539403
0.07243582031514798
0.07316017851829945
0.07389178030348245
0.07463069810651728
0.07537700508758245
0.07613077513845827
0.07689208288984285
0.07766100371874128
0.0784376137559287
0.07922198989348798
0.08001420979242287
0.0808143518903471
0.08162249540925057
0.08243872036334307
0.0832631075669765
0.08409573864264626
0.08493669602907272
0.08578606298936345
0.08664392361925709
0.08751036285544966
0.08838546648400417
0.08926932114884421
0.09016201436033265
0.09106363450393598
0.09197427084897535
0.0928940135574651
0.09382295369303975
0.09476118322997015
0.09570879506226986
0.09666588301289256
0.09763254184302148
0.0986088672614517
0.09959495593406621
0.10059090549340688
0.10159681454834095
0.10261278269382436
0.1036389105207626
0.10467529962597022
0.10572205262222992
0.10677927314845222
0.10784706587993674
0.10892553653873611
0.11001479190412347
0.1111149398231647
0.11222608922139635
0.11334835011361032
0.11448183361474643
0.11562665195089389
0.11678291847040283
0.11795074765510685
0.11913025513165793
0.1203215576829745
0.12152477325980425
0.12274002099240229
0.12396742120232632
0.12520709541434957
0.12645916636849308
0.127723758032178
0.12900099561249978
0.13029100556862477
0.13159391562431103
0.13290985478055414
0.1342389533283597
0.13558134286164328
0.1369371562902597
0.1383065278531623
0.13968959313169393
0.14108648906301088
0.142497353953641
0.1439223274931774
0.14536155076810917
0.14681516627579025
0.14828331793854815
0.14976615111793362
0.15126381262911295
0.15277645075540408
0.15430421526295812
0.1558472574155877
0.15740572998974356
0.158979787289641
0.1605695851625374
0.16217528101416276
0.16379703382430438
0.16543500416254742
0.1670893542041729
0.16876024774621462
0.17044785022367676
0.17215232872591352
0.17387385201317265
0.17561259053330439
0.17736871643863744
0.1791424036030238
0.18093382763905405
0.1827431659154446
0.18457059757459904
0.18641630355034502
0.1882804665858485
0.19016327125170698
0.19206490396422404
0.19398555300386627
0.19592540853390494
0.197884662619244
0.19986350924543644
0.20186214433789082
0.20388076578126973
0.20591957343908243
0.20797876917347324
0.21005855686520797
0.21215914243386005
0.21428073385819865
0.21642354119678064
0.21858777660874845
0.22077365437483593
0.2229813909185843
0.22521120482777013
0.22746331687604782
0.2297379500448083
0.23203532954525638
0.23435568284070896
0.23669923966911605
0.2390662320658072
0.24145689438646528
0.24387146333032994
0.24631017796363325
0.24877327974326957
0.25126101254070227
0.2537736226661093
0.2563113588927704
0.2588744724816981
0.26146321720651505
0.2640778493785802
0.266718627872366
0.26938581415108964
0.27207967229260055
0.27480046901552657
0.27754847370568186
0.28032395844273866
0.28312719802716607
0.28595847000743774
0.2888180547075121
0.2917062352545872
0.2946232976071331
0.2975695305832044
0.3005452258890364
0.3035506781479268
0.3065861849294061
0.3096520467787002
0.3127485672464872
0.31587605291895204
0.31903481344814155
0.322225161582623
0.3254474131984492
0.3287018873304337
0.33198890620373805
0.33530879526577545
0.3386618832184332
0.34204850205061754
0.3454689870711237
0.34892367694183496
0.35241291371125333
0.35593704284836586
0.3594964132768495
0.363091377409618
0.3667222911837142
0.3703895140955513
0.37409340923650686
0.37783434332887195
0.38161268676216065
0.38542881362978226
0.3892831017660801
0.3931759327837409
0.3971076921115783
0.40107876903269407
0.405089556723021
0.4091404522902512
0.4132318568131537
0.41736417538128523
0.4215378171350981
0.42575319530644906
0.43001072725951356
0.43431083453210867
0.43865394287742976
0.4430404823062041
0.44747088712926614
0.4519455960005588
0.45646505196056436
0.46102970248017
0.4656399995049717
0.47029639950002144
0.47499936349502164
0.47974935712997185
0.48454685070127157
0.4893923192082843
0.4942862424003671
0.4992291048243708
0.5042213958726145
0.5092636098313407
0.5143562459296541
0.5194998083889507
0.5246948064728402
0.5299417545375685
0.5352411720829442
0.5405935838037736
0.5459995196418114
0.5514595148382295
0.5569741099866118
0.5625438510864779
0.5681692895973427
0.5738509824933161
0.5795894923182493
0.5853853872414317
0.5912392411138461
0.5971516335249846
0.6031231498602344
0.6091543813588367
0.615245925172425
0.6213983844241493
0.6276123682683908
0.6338884919510748
0.6402273768705855
0.6466296506392913
0.6530959471456843
0.6596269066171412
0.6662231756833126
0.6728854074401457
0.6796142615145472
0.6864104041296927
0.6932745081709896
0.7002072532526995
0.7072093257852266
0.7142814190430788
0.7214242332335097
0.7286384755658448
0.7359248603215033
0.7432841089247183
0.7507169500139654
0.7582241195141051
0.7658063607092461
0.7734644243163386
0.7811990685595019
0.789011059245097
0.7969011698375479
0.8048701815359234
0.8129188833512826
0.8210480721847955
0.8292585529066434
0.8375511384357098
0.8459266498200669
0.8543859163182677
0.8629297754814503
0.8715590732362648
0.8802746639686274
0.8890774106083137
0.8979681847143969
0.9069478665615408
0.9160173452271562
0.9251775186794278
0.9344292938662221
0.9437735868048843
0.9532113226729332
0.9627434358996625
0.9723708702586591
0.9820945789612456
0.9919155247508581
1.0018346799983666
1.0118530267983503
Notice that there is no discernible pattern. If you ran Ibu's code, you would never know how long the fade was. You would have to grab a timer and guess and check 2 seconds. Nonetheless, Ibu's code did make a pretty nice fade in (it probably works for fade out. I don't know because I didn't use a fade out yet). My code will also work for a fade out. Let's just say you wanted 2 seconds for a fade out. You can do that with my code. Here is how it would look:
//Fade out. (Continued from the fade in.
function Timer2()
{
element.style.opacity = Op2;
Op2 = Op2 - .01;
console.log(Op2); //Option, but I recommend it for testing purposes.
if (Op2 < 0)
{
clearInterval(foo2);
}
}
All I did was change the opacity to 1 (or fully opaque). I changed the opacity increment to -.01 so it would start turning invisible. Lastly, I changed the opacity limit to 0. When it hits the opacity limit, the timer will stop. Same as the last one, except it used 1 instead of 0. When you run the code, here is what the console log should relatively look like.
.99
0.98
0.97
0.96
0.95
0.94
0.9299999999999999
0.9199999999999999
0.9099999999999999
0.8999999999999999
0.8899999999999999
0.8799999999999999
0.8699999999999999
0.8599999999999999
0.8499999999999999
0.8399999999999999
0.8299999999999998
0.8199999999999998
0.8099999999999998
0.7999999999999998
0.7899999999999998
0.7799999999999998
0.7699999999999998
0.7599999999999998
0.7499999999999998
0.7399999999999998
0.7299999999999998
0.7199999999999998
0.7099999999999997
0.6999999999999997
0.6899999999999997
0.6799999999999997
0.6699999999999997
0.6599999999999997
0.6499999999999997
0.6399999999999997
0.6299999999999997
0.6199999999999997
0.6099999999999997
0.5999999999999996
0.5899999999999996
0.5799999999999996
0.5699999999999996
0.5599999999999996
0.5499999999999996
0.5399999999999996
0.5299999999999996
0.5199999999999996
0.5099999999999996
0.49999999999999956
0.48999999999999955
0.47999999999999954
0.46999999999999953
0.4599999999999995
0.4499999999999995
0.4399999999999995
0.4299999999999995
0.4199999999999995
0.4099999999999995
0.39999999999999947
0.38999999999999946
0.37999999999999945
0.36999999999999944
0.35999999999999943
0.3499999999999994
0.3399999999999994
0.3299999999999994
0.3199999999999994
0.3099999999999994
0.2999999999999994
0.28999999999999937
0.27999999999999936
0.26999999999999935
0.25999999999999934
0.24999999999999933
0.23999999999999932
0.22999999999999932
0.2199999999999993
0.2099999999999993
0.1999999999999993
0.18999999999999928
0.17999999999999927
0.16999999999999926
0.15999999999999925
0.14999999999999925
0.13999999999999924
0.12999999999999923
0.11999999999999923
0.10999999999999924
0.09999999999999924
0.08999999999999925
0.07999999999999925
0.06999999999999926
0.059999999999999255
0.04999999999999925
0.03999999999999925
0.02999999999999925
0.019999999999999248
0.009999999999999247
-7.528699885739343e-16
-0.010000000000000753
As you can see, the .01 pattern still exists in the fade out. Both fades are smooth and precise. I hope these codes helped you or gave you insight on the topic. If you have any additions or suggestions let me know. Thank you for taking the time to view this!

I think i get the problem :
Once you make the div fade out you aren't exiting the function : fadeout calls itself again over even after opacity has become 0
if(element.style.opacity < 0.0) {
return;
}
And do the same for fadein too

let count=0;
let text = document.getElementById('heading');
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
if(count%2==0){
text.style.opacity="0.1";
unfade(text);
text.innerText="Welcome to Javascript </>";
text.style.color="forestgreen";
}//end of if
else{ text.style.opacity="0.1";
unfade(text);
text.innerText="Hello javascript";
text.style.color="blueviolet";
}//end of else
count++;//for toggling the text
});
//function for fade effect--------
function unfade(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 30);
}
<h1 style="color:blueviolet" id="heading">Hello javascript</h1>
<button id="btn">Click me</button>

The following javascript will fade in an element from opacity 0 to whatever the opacity value was at the time of calling fade in. You can also set the duration of the animation which is nice:
function fadeIn(element) {
var duration = 0.5;
var interval = 10;//ms
var op = 0.0;
var iop = element.style.opacity;
var timer = setInterval(function () {
if (op >= iop) {
op = iop;
clearInterval(timer);
}
element.style.opacity = op;
op += iop/((1000/interval)*duration);
}, interval);
}
*Based on IBUs answer but modified to account for previous opacity value and ability to set duration, also removed irrelevant CSS changes it was making

My answer is based on Gb01's answer (thank you!). I wanted to abstract out the logic so that we could simply pass an element to a function and have that element fade toggle, fade in, or fade out.
POD
To use the code below:
Elements that can be faded should be given the fadeable class.
Fade in/out with fadeInElement(element) and fadeOutElement(element).
Turn fade on/off with toggle, toggleElementFade(element).
Improvements Over Gb01's answer
Bug Fix: Gb01's answer only worked because id-based CSS rules take precedence over class-based CSS rules, and if you removed #slideSource from #slideSource.fade, it would cease to work.
Bug Fix: Gb01's answer provides for when you start with the element displayed. What if you want to start with it hidden? Completely different code is required
Code: Elements Begin Being Displayed
function fadeInElement(element) {
element.classList.remove('fade');
}
function fadeOutElement(element) {
element.classList.add('fade');
}
function toggleElementFade(element) {
element.classList.toggle('fade');
}
document.getElementById('fade-toggle').onclick = function () {
toggleElementFade(document.getElementsByClassName('fadeable')[0]);
}
document.getElementById('fade-in').onclick = function () {
fadeInElement(document.getElementsByClassName('fadeable')[0]);
}
document.getElementById('fade-out').onclick = function () {
fadeOutElement(document.getElementsByClassName('fadeable')[0]);
}
.fadeable {
opacity: 1;
transition: opacity 1s;
}
.fade {
opacity: 0 !important;
}
<button id="fade-toggle">Fade Toggle</button>
<button id="fade-in">Fade In</button>
<button id="fade-out">Fade Out</button>
<div class="fadeable">Whatever you want here - images or text</div>
Code: Elements Begin Being Hidden
function fadeInElement(element) {
element.style.removeProperty('display');
setTimeout(function() {
element.classList.remove('fade');
}, 10);
}
function fadeOutElement(element) {
element.classList.add('fade');
}
function toggleElementFade(element) {
element.style.removeProperty('display');
setTimeout(function() {
element.classList.toggle('fade');
}, 10);
}
document.getElementById('fade-toggle').onclick = function () {
toggleElementFade(document.getElementsByClassName('fadeable')[0]);
}
document.getElementById('fade-in').onclick = function () {
fadeInElement(document.getElementsByClassName('fadeable')[0]);
}
document.getElementById('fade-out').onclick = function () {
fadeOutElement(document.getElementsByClassName('fadeable')[0]);
}
.fadeable {
opacity: 1;
transition: opacity 1s;
}
.fade {
opacity: 0 !important;
}
<button id="fade-toggle">Fade Toggle</button>
<button id="fade-in">Fade In</button>
<button id="fade-out">Fade Out</button>
<div class="fadeable fade" style="display:none;">Whatever you want here - images or text</div>

That was actually quite simple .
for ex: if you are hiding the text or changing it's color .
document.getElementById('availabletoday').style.color = '#f4f6f7';
make a css property like this
#availabletoday{
transition: 1s;
}
depending upon your event listener when the JavaScript executes it will transition in 1s . really easy to change the delay .
Let me know if this helps

Fade in on mouse movement

How do I fade in div content on first mouse movement, like on google.com, using JavaScript? I don't want it to fade out again.

Code: (See it in action)
// attach event handler
document.body.onmousemove = function(){
fadeIn( this, 1000 ); // 1000ms -> 1s
this.onmousemove = null; // remove to only fade in once!
};
// sets the opacity of an element (x-browser)
function setOpacity( obj, value ) {
if ( obj ) {
obj.style.opacity = value / 100;
obj.style.filter = 'alpha(opacity=' + value + ')';
obj.style.zoom = 1;
}
}
// makes an element to fade in
function fadeIn( dom, interval, delay ) {
interval = interval || 1000;
delay = delay || 10;
var opacity = 0,
start = Number(new Date()),
op_per_ms = 100 / interval;
if ( typeof dom === "string" ) {
dom = document.getElementById( dom );
}
function step() {
var now = Number(new Date()),
elapsed = now - start;
opacity = elapsed * op_per_ms;
setOpacity( dom, opacity );
if ( elapsed < interval )
setTimeout( step, delay );
else
setOpacity( dom, 100 );
}
setTimeout( step, delay );
};
Note: the fade function could've been smaller, but in this form you can reuse it easily for any element and duration. Have fun!

If you use jquery and want it to fade in like google you could do something like this
$('body').mousemove(function() {
$('#content').fadeIn();
});

You can create a fade in effect for the body just like Google with the following code. Please take into consideration this will have similar functionality to Google. You can apply this technique to any element with the proper event handler.
var fps = 24;
var mpf = 1000 / fps;
function fadeIn(ele, mils) {
// ele: id of document to change.
// mils: number of mils for the tansition.
var whole = 0;
var milsCount = 0;
var subRatio = 1 / (mils / mpf);
while (milsCount <= mils) {
setTimeout('setOpacity("' + ele + '", ' + whole + ')', milsCount);
whole += subRatio;
milsCount += mpf;
}
// removes the event handler.
document.getElementById(ele).onmouseover = "";
}
function setOpacity(ele, value) {
ele = document.getElementById(ele);
// Set both accepted values. They will ignore the one they do not need.
ele.style.opacity = value;
ele.style.filter = "alpha(opacity=" + (value * 100) + ")";
}
You will want to add the event handler to the body of the document in whatever fashion you normally do. Be sure to modify the fadeIn function to pull information from the target/srcElement if you decide to use an attachment method that does not accept arguments. Or you can hard code desired values and objects into the function:
Inline:
<body id="theBody" onmouseover="fadeIn('theBody', 1500)">
DOM Level 0:
document.getElementByTagName("body")[0].onmouseover = function(){ code here };
document.getElementByTagName("body")[0].onmouseover = fadeIn;
DOM Level 2:
document.getElementByTagName("body")[0].addEventListener("mouseover", fadeIn);
document.getElementByTagName("body")[0].attachEvent('onclick', fadeIn);
You will also want to set up a css rule for the body element to make sure that it is not visible when the page loads:
body {
opacity: 0;
filter:alpha(opacity=0);
}
I have checked this code to work correctly on IE8, Chrome, Safari, FireFox, and Opera. Good luck.

Using CSS3 animations, for whoever supports it at this point.
body {
opacity: 0;
-webkit-transition: opacity 0.3s linear;
}
In the above example, whenever we change the opacity on the body, it will do a fade effect lasting 0.3 seconds linearly. Attach it to mousemove for one time only.
document.body.onmousemove = function() {
this.style.opacity = 1;
this.onmousemove = null;
};
See google.com revamped here :) Chrome and Safari only.

I would recommend using a javascript library such as http://jquery.com/.
Using jquery, if you wanted to fade in a div with id "content", you could write the following javascript code...
$(document).mousemove(function() {
$("#content").fadeIn();
});