See below snippet. Fade out works fine, but any idea why it won't fade in?
My HTML:
<div id="id10574"><span style="font-size:6em">♥</span></div>
<button id="b1">Fade Out</button>
<button id="b2">Fade In</button>
<script src="fade.js"></script>
and the JS:
var cat = document.getElementById("id10574");
cat.style.opacity = 1;
function fadeout() {
if (cat.style.opacity > 0) {
cat.style.opacity = (cat.style.opacity - 0.01);
setTimeout( fadeout, 10 );
} else {
}
}
function fadein() {
if (cat.style.opacity < 1) {
cat.style.opacity = (cat.style.opacity + 0.01);
setTimeout( fadein, 10 );
} else {
}
}
document.getElementById("b1").addEventListener("click", fadeout , false);
document.getElementById("b2").addEventListener("click", fadein , false);
I'm really stumped on this one. Trying to make a simple effect that will work on IE8 (Sharepoint in corporate environment).
Thanks!
Basically, cat.style.opacity is a string. So cat.style.opacity + 0.01 would be regarded as a string concatenation.
You can do parseFloat(cat.style.opacity) + 0.01 instead
In fact, there are many ways to coerce a string to number. cat.style.opacity - 0.0 as your fadeout(), or even 1.0 * cat.style.opacity
see https://jsfiddle.net/03rzmyL0/
Does this do what you want?
function fadeout() {
setInterval( function(){
cat.style.opacity = (cat.style.opacity - 0.01);
}, 10 );
}
The issue is due to wrong assignment of value to opacity. To as value of style opacity is text you have to parse it to float value and then you can check or assign values properly.
Check Demo here.
var cat = document.getElementById("id10574");
cat.style.opacity = 1;
var fdout, fdin;
function fadeout() {
fdout = setInterval( function(){
if (parseFloat(cat.style.opacity) > 0) {
cat.style.opacity = parseFloat(cat.style.opacity) - 0.01;
} else {
clearInterval(fdout);
}
}, 10 );
}
function fadein() {
fdin = setInterval( function(){
if (parseFloat(cat.style.opacity) < 1) {
cat.style.opacity = parseFloat(cat.style.opacity) + 0.01;
} else {
clearInterval(fdin);
}
}, 10 );
}
document.getElementById("b1").addEventListener("click", fadeout , false);
document.getElementById("b2").addEventListener("click", fadein , false);
Related
I am trying to set a background image rotation for a div with a image already in it, doesn't seem to change anything, thought I would check if someone could see the problem since no errors come up.
<script>
$( document ).ready(function() {
setInterval(function() {
var tips = [
"header.jpg",
"header2.jpg",
"header3.jpg",
"header4.jpg",
"header5.jpg",
];
var i = 0;
if (i == tips.length) --i;
$('.containercoloring').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + tips[i] + ')');
}).delay(1000).fadeTo('slow', 1);
i++;
}, 5 * 1000);
});
</script>
<body>
<div class="containercoloring"> </div>
</body>
Below is the working(updated) code. I hope you are importing jquery lib separately.
<script>
$(document).ready(function() {
var i = 0;
setInterval(function() {
var tips = [
"header.jpg",
"header2.jpg",
"header3.jpg",
"header4.jpg",
"header5.jpg"
];
var imageIndex = ++i % tips.length;
$('.containercoloring').fadeTo('slow', 0.3, function() {
$(this).css('background-image', 'url(' + tips[imageIndex] + ')');
}).delay(1000).fadeTo('slow', 1);
}, 5 * 1000);
});
</script>
<body>
<div class="containercoloring" style="height: 100px;">Image Container</div>
</body>
You can test here in this jsfiddle - https://jsfiddle.net/nbq9f6bg/
Hope it helps!
So there were a couple of notes I had about your example. Please see the comments below. I used background color and removed the transitions to show it easier.
// declare variables
var tips = [
"#ff9000",
"#ff0000",
"#0099ff"
];
// counter
var i = 0;
// direction
var direction = 'forwards';
// time in between intervals
var timer = 2000;
function changeBackground() {
// Check the length minus 1 since your counter starts at 0
if (i == (tips.length - 1)) {
direction = 'backwards';
} else if(i == 0) {
// only set the direction back to forwards when the counter is 0 again
direction = 'forwards';
}
$('.containercoloring').css('background-color', tips[i]);
// add or subtract based on the direction
if(direction == 'forwards') {
i++;
} else {
i--;
}
}
$( document ).ready(function() {
// save interval to a variable so you can stop it later
var theInterval = setInterval(changeBackground, timer);
// run the function since the interval will take 2000ms to execute
changeBackground();
});
.containercoloring {
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containercoloring"> </div>
I am trying to make an image to fade out and then in. The problem is that when I use two functions, the image doesn't fade out but it immediately disappears. Is there anyone with amazing JavaScript skills to solve my problem?
Please do not tell me about jQuery because I already know how to do it using it, I only need to improve my JavaScript skills.
PS: I need also to understand why it doesn't work and how to make it work with as much details please.
Here is my code:
var el = document.getElementById("img1");
el.addEventListener("click", function() {
function fadeOut() {
el.style.opacity = 1;
function fade(){
var val = el.style.opacity;
if ((val -= .01) > 0){
el.style.opacity = val;
requestAnimationFrame(fade);
}
}
fade();
};
function fadeIn() {
el.style.opacity = 0;
function fade1() {
var val = el.style.opacity;
if ((val += .01) < 1){
el.style.opacity = val;
requestAnimationFrame(fade1);
}
}
fade1();
};
fadeIn();
fadeOut();
});
Thank you!
Still not the prettiest, but I have made just the minimum changes to your code to make it work: http://codepen.io/rlouie/pen/BzjZmK
First, you're assigning the opacity value back and forth repeatedly for no reason, which makes the code confusing to follow and also results in string concatenation instead of addition or subtraction, I have simplified this. Second, the functions were named the opposite of what they did, also confusing and fixed by me here. Finally, you ran both functions one after the other, so the second function set opacity to zero and then broke. Instead, I use a promise in your first function and resolve it when the animation completes.
That way the second function does not run until after the first one has completed animating.
var el = document.getElementById("img1");
el.addEventListener("click", function() {
function fadeOut() {
return new Promise(function (resolve, reject) {
let opacity = 1;
function fade(){
if ((opacity -= .01) > 0){
el.style.opacity = opacity;
requestAnimationFrame(fade);
} else {
resolve();
}
}
fade();
});
};
function fadeIn() {
let opacity = 0;
function fade1() {
if ((opacity += .01) < 1){
el.style.opacity = opacity;
requestAnimationFrame(fade1);
}
}
fade1();
};
fadeOut().then(fadeIn);
});
My proposal is:
start animation with fadein
when fadein finishes start the fadeout
var el = null;
function fadeIn(timestamp) {
var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
if ((val -= .005) > 0) {
el.style.opacity = val;
window.requestAnimationFrame(fadeIn);
} else {
window.requestAnimationFrame(fadeOut);
}
}
function fadeOut(timestamp) {
var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
if ((val += .005) < 1) {
el.style.opacity = val;
window.requestAnimationFrame(fadeOut);
}
};
window.onload = function () {
el = document.getElementById('img1');
el.addEventListener('click', function(e) {
window.requestAnimationFrame(fadeIn);
});
}
<img id="img1" src="http://www.loc.gov/pictures/static/data/highsm/banner.jpg">
Voor de fade in:
Function FadeIn() {
var milli = 3000; //duration
el = yourelement;
el.style.opacity = 1;
var a = 1 / (milli / 1000 * 16); //the -x
FadeIn_loop(a);
}
Function FadeIn_loop(a) {
if (el.style.opacity > 0.01) {
el.style.opacity = el.style.opacity - a;
setTimeout("FadeIn(" + el + ")", 16); //about 1/60 a second
} else {
el.style.opacity = 0;
}
}
Same thing for fade out, succes!
In your code are many things that does'nt seem to be right. First of get all those functions out of each other otherwise requestAnimationframe cant find the functions.
I have a problem setting opacity to 0 after animate function in jQuery finished changing opacity value from 0 to 1. Any help would be appreciated.
var i = -1;
var interval = setInterval($.proxy(function () {
i++;
if (i >= this.options.slices) {
clearInterval(interval);
this.$element.children("[class='" + this.options.clonesClass + "']" ).css("opacity", 0);
} else {
this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000);
}
}, this), 50)
Take a look in animate docs. If what you want to achieve is performing an action after animate completes, then pass a function performing that action as a last argument to animate.
So basically this
this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000)
should become something like
this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000, function(){
$element.css({opacity:0});
})
Edit:
Working with intervals is not really required with jQuery. Assumming the element you want to animate is $element, just execute
$element.stop().animate({ opacity: 1 }, 1000, function(){
$element.css({opacity:0});
})
Edit:
To achieve what you describe in a comment you need to chain animate calls in a sequence. I would recommend a recursive construct like this (pseudo code):
function myAnimate(elementsArray, num) {
if (num < elementsArray.size) {
$(elementsArray[num]).animate({ opacity: 1 }, 1000, function(){
myAnimate(elementsArray, num + 1);
})
} else {
for each el in elementsArray {
$(el).css({opacity:0});
}
// do other things, like prepare for next iteration
// then maybe call myAnimate(elementsArray, 0)
// to start all over again
}
}
then call it like this
myAnimate($('div.toBeAnimated'), 0)
This is the only way I managed to achieve the result I wanted.
var t = this;
t.$element.children( "[class='" + t.options.clonesClass + "']" ).each( $.proxy( function () {
setTimeout( $.proxy( function () {
i++;
if ( i < t.options.slices ) {
$( this ).animate( { opacity: 1 }, 1000 )
} else {
$( this ).animate( { opacity: 1 }, 1000, function () {
t.$element.children( "[class='" + t.options.clonesClass + "']" ).css( "opacity", 0 );
} );
}
}, this ), timeBuffer );
timeBuffer += 50;
} ), this );
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
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