Raf*_*fał 53 javascript css xhtml
我想让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>
我做错了什么,淡出和淡出元素的最佳方法是什么？
Ibu*_*Ibu 114
这是一种淡出元素的更有效方法:
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);
}
你可以反过来淡入淡出
setInterval或setTimeout不应该将字符串作为参数
谷歌eval的邪恶知道为什么
这是一种更有效的元素淡入方式.
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);
}
Gb0*_*b01 54
这是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>Ita*_*agi 23
为什么这样对自己？
jQuery的:
$("#element").fadeOut();
$("#element").fadeIn();
我认为这更容易.
Sea*_*nja 10
这是我尝试使用Javascript和CSS3动画所以HTML:
<div id="handle">Fade</div>
<div id="slideSource">Whatever you want images or text here</div>
带过渡的CSS3:
div#slideSource {
opacity:1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
transition: opacity 3s;
}
div#slideSource.fade {
opacity:0;
}
Javascript部分.检查className是否存在,如果存在,则添加类和转换.
document.getElementById('handle').onclick = function(){
if(slideSource.className){
document.getElementById('slideSource').className = '';
} else {
document.getElementById('slideSource').className = 'fade';
}
}
只需点击它就会淡入淡出.我建议使用JQuery作为Itai Sagi提到的.我遗漏了Opera和MS,所以我建议使用prefixr在css中添加它.这是我第一次发布stackoverflow,但它应该工作正常.
好的,我已经解决了
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;
因为不透明度值存储为字符串,而不是float.我仍然不确定为什么添加有效.