如何使用 JavaScript 和 CSS 实现淡入和淡出
我想让 HTML div 标签淡入和淡出。
我有一些淡出的代码，但是当我淡入时，div 的不透明度保持在 0.1 并且不会增加。
<!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>
我做错了什么以及淡入和淡出元素的最佳方法是什么？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（14）
这是一种更有效的淡出元素的方法：
您可以在 setInterval 或 setTimeout 中对淡入进行相反的操作，
否则 setTimeout 不应该获取字符串作为参数
，谷歌 eval 的弊端以了解原因
，这里是 一种更有效的淡入元素方式。
Here is a more efficient way of fading out an element:
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.
这是 西雅图忍者的解决方案。
Here is a simplified running example of Seattle Ninja's solution.
为什么要这样对自己？
jQuery：
我认为这更容易。
www.jquery.com
why do that to yourself?
jQuery:
I think that's easier.
www.jquery.com
这是我对 Javascript 和 CSS3 动画的尝试
HTML：
带有过渡的 CSS3：
Javascript 部分。检查 className 是否存在，如果存在则添加类和转换。
只需单击一下，它就会淡入和淡出。我建议使用 JQuery，正如 Itai Sagi 提到的那样。我遗漏了 Opera 和 MS，所以我建议使用 prefixr 将其添加到 css 中。这是我第一次在 stackoverflow 上发帖，但应该可以正常工作。
Here's my attempt with Javascript and CSS3 animation
So the HTML:
The CSS3 with transitions:
The Javascript part. Check if the className exists, if it does then add the class and transitions.
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.
好的，我已经解决了
应该使用
Same with
而不是
因为不透明度值存储为字符串，而不是浮点数。我仍然不确定为什么添加会起作用。
Ok, I've worked it out
Should be used instead of
Same with
Instead of
Because opacity value is stored as string, not as float. I'm still not sure though why the addition has worked.
我通常使用这些实用函数。
element是 HTML 元素，duration是所需的持续时间（以毫秒为单位）。I usually use these utility functions.
elementis the HTML element anddurationis the desired duration in milliseconds.这是我的淡入/淡出切换功能的代码。
这是来自我做的 jQuery 风格库。希望它有帮助。链接到cloud9上的lib：
https://c9.io/christopherdumas/magik_wb
Heres my code for a fade in/out toggle functions.
This was from a jQuery style lib i did. hope it's helpfull. link to lib on cloud9:
https://c9.io/christopherdumas/magik_wb
我喜欢 Ibu 的方案，但是我认为利用他的想法我可以找到更好的解决方案。
该解法使用了一个附加方程，与 Ibu 的解法不同，Ibu 的解法使用了乘法方程。它的工作原理是，在方程中需要时间增量 (t)、不透明度增量 (o) 和不透明度限制 (l)，即： (T = 淡入淡出时间，以毫秒为单位) [T = (l/ o)*t]。 “20”表示时间增量或间隔 (t)，“.01”表示不透明度增量 (o)，1 表示不透明度限制 (l)。当您将数字代入等式时，您会得到 2000 毫秒（或 2 秒）。以下是控制台日志：
请注意不透明度如何遵循 0.01 的不透明度增量，就像代码中一样。如果您使用 Ibu 制作的代码，
您将在控制台日志中获得这些数字（或类似的内容）。这是我得到的。
请注意，没有明显的模式。如果你运行 Ibu 的代码，你永远不会知道淡入淡出持续了多长时间。你必须拿起一个计时器，猜测并检查 2 秒。尽管如此，Ibu 的代码确实实现了相当不错的淡入（它可能适用于淡出。我不知道，因为我还没有使用淡出）。我的代码也适用于淡出。假设您需要 2 秒的淡出时间。你可以用我的代码做到这一点。它看起来是这样的：
我所做的就是将不透明度更改为 1（或完全不透明）。我将不透明度增量更改为 -.01，这样它就会开始变得不可见。最后，我将不透明度限制更改为0。当达到不透明度限制时，计时器将停止。与上一个相同，只是它使用 1 而不是 0。当您运行代码时，控制台日志应该如下所示。
正如您所看到的，0.01 图案在淡出中仍然存在。两种淡入淡出都平滑且精确。我希望这些代码对您有所帮助或让您深入了解该主题。如果您有任何补充或建议请告诉我。感谢您抽出时间查看此内容！
I like Ibu's one but, I think I have a better solution using his idea.
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:
Notice how the opacity follows the opacity increment amount of .01 just like in the code. If you use the code Ibu made,
you will get these numbers (or something similar) in you console log. Here is what I got.
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:
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.
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!
我的回答基于Gb01的回答（谢谢！）。我想抽象出逻辑，以便我们可以简单地将一个元素传递给一个函数，并让该元素淡入淡出切换、淡入或淡出。
POD
使用下面的代码：
fadeable类。fadeInElement(element)和fadeOutElement(element)淡入/淡出。toggleElementFade(element)打开/关闭淡入淡出。对 Gb01 答案的改进
id的 CSS 规则优先于基于class的 CSS 规则，并且如果您删除了#slideSource< /code> 从#slideSource.fade开始，它将停止工作。代码：Elements Begin Being Displayed
代码：元素开始被隐藏
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:
fadeableclass.fadeInElement(element)andfadeOutElement(element).toggleElementFade(element).Improvements Over Gb01's answer
id-based CSS rules take precedence overclass-based CSS rules, and if you removed#slideSourcefrom#slideSource.fade, it would cease to work.Code: Elements Begin Being Displayed
Code: Elements Begin Being Hidden
我想我遇到了问题：
一旦你使 div 淡出，你就不会退出该函数：即使不透明度变为 0，淡出也会再次调用自身并对
淡入也执行相同的操作
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
And do the same for fadein too
以下 javascript 会将元素从不透明度 0 淡入到调用淡入时的不透明度值。您还可以设置动画的持续时间，这很好：
*基于 IBU 回答，但进行了修改以考虑之前的不透明度值和设置持续时间的能力，还删除了它所做的不相关的 CSS 更改
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:
*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
使用js
transitionend事件，例如，像这样：创建具有可见性/不透明度的css过渡
您可以通过css过渡计时来控制淡入/淡出的速度，
接下来，在js中
这可以改进。
演示：
Using js
transitionendevent, e.g., like this:create css transition with visibility/opacity
You control the speed of fading in/out by css transition timing,
next, in js
This could be improved tho.
Demo:
那其实很简单。
例如：如果您隐藏文本或更改其颜色。
创建一个像这样的 css 属性，
具体取决于您的事件侦听器，当 JavaScript 执行时，它将在 1s 内转换。改变延迟真的很容易。
让我知道这是否有帮助
That was actually quite simple .
for ex: if you are hiding the text or changing it's color .
make a css property like this
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