使用JavaScript和HTML淡入和淡出
[英]Fade in and Fade out using JavaScript and HTML
问题描述
I want to use fade in and fade out animation using JavaScript functions. 
我想通过JavaScript函数使用淡入和淡出动画。 My code is not working for some reason. 我的代码由于某种原因无法正常工作。 Here are the div and JavaScript Functions. 这是div和JavaScript函数。
The final output should be like the first image should fade out and the second image should fade in. 最终输出应该像第一个图像淡出，第二个图像淡入。
.special1
{ opacity:0.0; position:absolute; height: 175px; margin-right:25px}
.visible1 {
opacity: 1.0;
position: absolute;
height: 175px;
margin-right: 25px;
}
<body onLoad="fading()">
<div id="div21" class="visible1"> <img src="home/img" alt="img1"/> </div>
<div id="div22" class="special1"> <img src="home/img2" alt="img2"/> </div>
function fading()
{
disappear();
}
function disappear() {
document.getElementById("div21").style.opacity = fadeOut_opacity;
document.getElementById("div22").style.opacity = fadeIn_opacity;
fadeOut_opacity -= delta;
fadeIn_opacity += delta;
if (fadeIn_opacity >= 1)
return;
timer = setTimeout("disappear()", 1);
}
2 个解决方案
解决方案1
0 2019-03-10 03:45:06
You can do it with plain Javascript. 您可以使用纯Javascript来实现。 But why do that if you have CSS transition or more contingently, JQuery FadeIn and FadeOut methods built in with many other functionalities like fading speed? 但是，如果您有CSS转换或更偶然的情况，为什么还要使用其他许多功能（例如衰落速度）内置的JQuery FadeIn和FadeOut方法呢？
解决方案2
0 已采纳 2019-03-10 07:17:53
I have editted your code and i works how you want. 我已经编辑了您的代码，并且可以按照您的要求进行工作。
var delta = .002; var fadeOut_opacity = 1; var fadeIn_opacity = 0; function fading() { disappear(); } function disappear() { document.getElementById("div21").style.opacity = fadeOut_opacity; document.getElementById("div22").style.opacity = fadeIn_opacity; fadeOut_opacity -= delta; fadeIn_opacity += delta; if (fadeIn_opacity >= 1) return; timer = setTimeout("disappear()", 1); }
.special1 { opacity: 0.0; position: absolute; height: 175px; margin-right: 25px } .visible1 { opacity: 1.0; position: absolute; height: 175px; margin-right: 25px; }
<body onLoad="fading()"> <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div> <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div> </body>
But like the others say it's more complicated to use vanilla js for opacity transitions. 但是就像其他人说的那样，使用香草js进行不透明过渡会更加复杂。 You can use css transition to achieve this. 您可以使用CSS过渡来实现此目的。
function fading() { var div21 = document.getElementById('div21'); var div22 = document.getElementById('div22'); div21.classList.toggle('special1'); div21.classList.toggle('visible1'); div22.classList.toggle('special1'); div22.classList.toggle('visible1'); }
.visible1, .special1 { position: absolute; height: 175px; margin-right: 25px; transition: opacity ease 3.2s; } .visible1 { opacity: 1.0; } .special1 { opacity: 0.0; }
<body onLoad="fading()"> <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div> <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div> </body>
EDIT: For your comment @Afroboy23 " How would the code change if I have more than two images? For eg 10 images " 编辑：对于您的评论@ Afroboy23“ 如果我有两个以上的图像，代码将如何更改？例如10个图像 ”
let fId; function fading() { fId = setInterval(toggleImg, 2000); } function toggleImg() { let visible = document.querySelector('.visible1'); if (!visible.nextElementSibling.classList.contains('special1')) { clearInterval(fId); return; } visible.classList.toggle('visible1'); visible.nextElementSibling.classList.toggle('visible1'); }
.visible1, .special1 { position: absolute; height: 175px; margin-right: 25px; transition: opacity ease 3.2s; opacity: 0.0; } .visible1 { opacity: 1.0; }
<body onLoad="fading()"> <div id="div21" class="special1 visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div> <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div> <div id="div23" class="special1"> <img src="https://via.placeholder.com/150?text=image%203" alt="img3" /> </div> <div id="div24" class="special1"> <img src="https://via.placeholder.com/150?text=image%204" alt="img4" /> </div> <div id="div25" class="special1"> <img src="https://via.placeholder.com/150?text=image%205" alt="img5" /> </div> <div id="div26" class="special1"> <img src="https://via.placeholder.com/150?text=image%206" alt="img6" /> </div> <div id="div27" class="special1"> <img src="https://via.placeholder.com/150?text=image%207" alt="img7" /> </div> <div id="div28" class="special1"> <img src="https://via.placeholder.com/150?text=image%208" alt="img8" /> </div> <div id="div29" class="special1"> <img src="https://via.placeholder.com/150?text=image%209" alt="img9" /> </div> <div id="div30" class="special1"> <img src="https://via.placeholder.com/150?text=image%2010" alt="img10" /> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.