如何使用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>
我在做什么错，淡入淡出元素的最佳方法是什么？
问题答案：
好，我已经解决了
element.style.opacity = parseFloat(element.style.opacity) + 0.1;
应该代替
element.style.opacity += 0.1;
与相同
element.style.opacity = parseFloat(element.style.opacity) - 0.1;
代替
element.style.opacity -= 0.1;
因为不透明度值存储为字符串，而不是浮点数。我仍然不确定为什么添加成功了。
-
问题内容： 我想淡入淡出带有UIBlurEffect的UIVisualEffectsView： 我在a调用的函数中使用普通动画来使其淡入，对于淡出也相同，但＆： 现在，在两个方向上褪色的工作，但衰落时，它给我一个错误 了 ： 被要求动画其不透明度。这将导致效果显示为残破，直到不透明度恢复到1。 题 如何成功地淡入和淡出而不 破坏 它并使其褪色？ 注意 我试图将其放进去并逐渐消失，但没有成功 问题答
-
问题内容： 通过使用以下CSS将其类更改为.elementToFadeInAndOut，可以使不透明度为零的元素淡入： 有没有一种方法可以通过编辑同一类的CSS使元素淡入淡出？ 问题答案： 使用CSS @keyframes 这是一个演示 阅读：使用CSS动画 您可以通过执行以下操作清除代码：
-
问题内容： 到目前为止，我已经尝试了很多方法以达到以下效果，但均未成功： 有任何想法吗？ 问题答案： 您可以淡化背景颜色，但不能淡化背景图像。解决此问题的方法是将图像作为标签，并默认隐藏它们。提供您的图像，这样它们就可以像背景一样发挥作用，并且位于其他一切之后。 这是一个图像快速变淡的示例。 HTML CSS jQuery
-
问题内容： 如何使用jQuery淡入文本内容？ 关键是要引起用户对消息的注意。 问题答案： 确切的功能（3秒发光以突出显示一条消息）在jQuery UI中实现为突出显示效果 颜色和持续时间可变
-
我编写了一个具有连锁反应的android代码，添加了: 我需要调整一下。我知道如何改变波纹颜色。但是你认为下面的内容可以调整吗？ 点击（单击并松开），按颜色显示常规，无波纹。 握住手指较长时-显示波纹 开机后6毫秒后开始淡出 我知道添加一个可绘制的选择器可以控制更多状态，但我认为它不能控制持续时间。 可能吗？
-
主要内容：实例,jQuery Fading 方法,jQuery fadeIn() 方法,实例,jQuery fadeOut() 方法,实例,jQuery fadeToggle() 方法,实例,jQuery fadeTo() 方法,实例通过 jQuery，您可以实现元素的淡入淡出效果。 因为时间是宝贵的，我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQ