背景颜色不褪色

我为一位同学编写了一个简短的脚本，并认为我会展示一个很好的背景褪色，使其看起来更好。我可以实现颜色变化，但不会从一个状态顺利过渡到下一个状态。我认为这会工作，但也许我错了或错过了一些东西。背景颜色不褪色

脚本中的其他内容都可以工作，因此请继续使用，如果您愿意的话。它所做的只是导致屏幕暂停，因此在做其他事情之前可以显示错误或消息。

模板：

<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>Message Expansion Demonstration</title> 

<style> 

body { 
     margin:0 auto; 
     padding:0 0; 
     height:100%; 
     width:100%; 
     text-align:center; } 

#haltPage { 
     display:none; 
     position:absolute; 
     height:100%; 
     width:100%; 
     top:0px; 
     background-color:rgba(0, 0, 0, 0.0); 
     transition: background-color 1s linear .1; 
     -webkit-transition: background-color 1s linear .1; 
     -o-transition: background-color 1s linear .1; 
      z-index=9999; 
    } 

.wrong { 
     position:relative; 
     padding:auto auto; 
     margin:auto auto; 
     height:250px; 
     width:400px; 
     background-color:#666; 
     border-bottom-left-radius:0.5em 0.5em; 
     border-bottom-right-radius:0.5em 0.5em; 
     border-top-left-radius:0.5em 0.5em; 
     border-top-right-radius:0.5em 0.5em; 
     box-shadow:5px 10px 25px #000; } 

.wrong p { 
     padding:10px; } 

</style> 

<script> 

function wrong (classID) 
{ 
    var on = 'block'; 
    var visable = 'rgba(0, 0, 0, 0.4)'; 

    clearClass (); 
    document.getElementById('haltPage').style.display = on; 

    document.getElementById('haltPage').style.backgroundColor = visable; 
    document.getElementById(classID).style.display = on; 
} 

function clearClass () 
{ 
    var off = 'none'; 
    document.getElementById('haltPage').style.display = off; 
    document.getElementById('wrong1').style.display = off; 
    document.getElementById('wrong2').style.display = off; 
    document.getElementById('wrong3').style.display = off; 
} 

</script> 

</head> 

<body> 

    <a href="#" onClick="wrong('wrong1')">Wrong Answer One</a><br><br> 
    <a href="#" onClick="wrong('wrong2')">Wrong Answer Two</a><br><br> 
    <a href="#" onClick="wrong('wrong3')">Wrong Answer Three</a><br><br> 

<!-- This is not seen untill called --> 
    <div id="haltPage"> 
    <br><br><br> 
     <div id="wrong1" class="wrong"> 

      <h1>Wrong!</h1> 
      <p>You are wrong!<br><a href="#" onClick="clearClass();">Close</a></p> 

     </div> 

     <div id="wrong2" class="wrong"> 

      <h1>Wrong!</h1> 
      <p>You are wronger! < Not a word<br><a href="#" onClick="clearClass();">Close</a></p> 

     </div> 

     <div id="wrong3" class="wrong"> 

      <h1>Wrong!</h1> 
      <p>You are wrongest! < duh<br><a href="#" onClick="clearClass()">Close</a></p> 

     </div>  

    </div> 

</body> 

</html>

来源

2012-03-22 Brandon Clark

尝试在你的CSS定义添加一个 “S” 值后面的时间 “#haltPage”：

transition: background-color 1s linear .1s; 
    -webkit-transition: background-color 1s linear .1s; 
    -o-transition: background-color 1s linear .1s;

来源

2012-03-22 19:38:54 Chris

您的权利并没有意识到这一点。但是，这仍然没有奏效。我认为这可能是因为我改变了相同的CSS元素。 – 2012-03-22 19:48:40

想要封装它 – 2012-03-22 19:49:04

好吧，试图封装到：我学到的活动状态非常没有意义。我被指向下面这个链接，似乎有我正在寻找的解决方案。 [1]：https：//developer.mozilla.org/en/CSS/CSS_transitions#Using_transitions_to_make_JavaScript_functionality_smooth – 2012-03-22 20:45:08

背景颜色不褪色

回答

相关问题