背景色がフェードアウトしない

私は仲間の同級生のための短いスクリプトをまとめて、見栄えの良いバックグラウンドフェードを見せると思っていました。私は色の変化を達成することができますが、それはスムーズに1つの状態から次の状態に移行しません。私はこれがうまくいくと思ったが、おそらく私は間違っているか何かを逃していた。背景色がフェードアウトしない

スクリプト内の他のすべてが動作しますので、必要に応じて使用してください。すべてのことが画面を停止させるので、他の操作を行う前にエラーまたはメッセージを表示することができます。

テンプレート： "#haltPage" のためのあなたのCSSの定義で時間の値の後ろに "s" を追加することにより、

<!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

試してみてください。

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エレメントを変更している可能性があります。 –

カプセル化しようとしています –

カプセル化しようとすると無意味です。私は、私が探している解決策があるように思われるこのリンクを指摘しました。 [1]：https://developer.mozilla.org/ja/CSS/CSS_transitions#Using_transitions_to_make_JavaScript_functionality_smooth –

背景色がフェードアウトしない

答えて

関連する問題