CSSとJavascriptを使用してテキストのフェードインとフェイスアウト

Question

私はこれでかなり新しいです。これまでは、CSSを使用してボタンをクリックするとテキストが消えてしまいましたが、スタイルはそのまま残り、新しいボタンをクリックしたときに不透明度をゼロに戻すことはできません。私はCSSの側面を拡張したいので、純粋なJavascriptを使用するのは嫌です。私はこれが理にかなったことを願っていますが、誰かが私がボタンをクリックするたびにテキストが消えるように助けることができれば、それは素晴らしいことでしょう。

CSSをもう一度フェードアウトする方法を私に示すことができれば、それはすばらしいことでしょう。どうもありがとう。

これは現在どのように動作するかに関するリンクです。 http://infinitedv.co.uk/test01/experiment01.html

function text1() { 
 
    textbox.style.opacity = 1; 
 
    textbox.style.transition = "opacity 1.6s"; 
 
    document.getElementById("textbox").innerHTML = 
 
    "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! "; 
 
}; 
 
function text2() { 
 
    textbox.style.opacity = 1; 
 
    textbox.style.transition = "opacity 1.6s"; 
 
    document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date(); 
 
};

#textbox { 
 
    width: 400px; 
 
    opacity: 0; 
 
} 
 
#wrapper { 
 
    margin: auto; 
 
    width: 500px; 
 
}

<div id="wrapper"> 
 
    <h1>Will's Amazing javascript experience!</h1> 
 
    <button onclick="text1()" type="Button 1">Button1</button> 
 
    <button onclick="text2()" type="Button 2">Button2</button> 
 
    <br /> 
 
    <p id="textbox">Text will Magically appear here!</p> 
 
</div>

Answer 1

次の例では、要素に追加するときに何かをフェードCSSクラスanimateeを使用して戻って0にHTML要素の不透明度をリセットするのを忘れていました。 animateeは、最初にボタンをクリックすると削除され（トランスペアレントになります）、トランジションをトリガーするタイムアウトに再び追加されます。

 function text1() { 
 
      document.getElementById("textbox").className = ""; 
 
      document.getElementById("textbox").innerHTML = 
 
      "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! "; 
 
      setTimeout(function() { 
 
      document.getElementById("textbox").classList.add("animatee"); 
 
      }, 300); 
 
     }; 
 

 
     function text2() { 
 
      document.getElementById("textbox").className = ""; 
 
      document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date(); 
 
      setTimeout(function() { 
 
      document.getElementById("textbox").classList.add("animatee"); 
 
      }, 300); 
 
     };

 #textbox { 
 
     width: 400px; 
 
     opacity: 0; 
 
    } 
 
    #wrapper { 
 
     margin: auto; 
 
     width: 500px; 
 
    } 
 
    .animatee { 
 
     opacity: 1 !important; 
 
     transition: opacity 1.6s ease 0s; 
 
    }

<div id="wrapper"> 
 

 
    <h1>Will's Amazing javascript experience!</h1> 
 

 
    <button onclick="text1()" type="Button 1">Button1</button> 
 
    <button onclick="text2()" type="Button 2">Button2</button> 
 
    <br /> 
 
    <p id="textbox">Text will Magically appear here!</p> 
 
</div>

Answer 2

純粋に自分のコードの先頭にこれを追加することで、jQueryライブラリを含めることであろうJavascriptを使用せずにここにあなたの最善の策：次に

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>

jQueryが提供する.animate()関数を使用して、必要なセレクタの不透明度プロパティを直接変更することができます。 .fadeIn()、.fadeOut()、.fadeToggle()という機能もありますが、CSSプロパティに直接アクセスすることはできません。ここで時間をかけて不透明度を切り替えること.animate()を使用する方法の例です：

これは、0〜400ミリ秒にわたってへの不透明度をフェード： $('#my-selector').animate({opacity: 0},400);

これはバック100 400以上のミリ秒に不透明度をフェード： $('#my-selector').animate({opacity: 100},400);

.animate()ドキュメント： フェードのドキュメント：https://api.jquery.com/category/effects/fading/

jQueryを使用するのが最も簡単ですし、プロの開発に使用される最も一般的なJavaScriptライブラリです。