如何使用JavaScript和CSS进行淡入和淡出
如何使用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>我做错了什么，淡出和淡出元素的最佳方法是什么？
潇潇雨雨浏览 730回答 3
3回答
-
千巷猫影
这是Seattle Ninja解决方案的简化运行示例。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>
随时随地看视频慕课网APP
JavaScript
Html/CSS