CODEWITHSUNDEEP
javascripthtmlcsscss-transitionsfade
Cuckoo
Cuckoo

Reputation: 366

Fading text in and out using CSS and Javascript

I'm pretty new at this. So far I've managed to get my text to fade in when I click a button using CSS, but then the style stays there and I can't get it to reset the opacity back to zero on when clicking a new button. I don't want to use pure Javascript to do it, as I want to expand on the CSS aspect. I hope this makes sense, but if anyone can help me make it so the text fades in every time I click a button, that would be amazing.

Even better, if you can show me how to make the CSS fade it out again, that would be super amazing. Many thanks.

This is a link to how it currently works. 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>

Upvotes: 2

Views: 5166

Answers (2)

iyyappan
iyyappan

Reputation: 777

You forgot to reset the HTML element's opacity back to 0. The following example uses a CSS class animatee which fades something in when added to an element. animateeis removed when you first click the button (so it makes it transparent), and then added again on a timeout which will trigger the transition.

        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>

Upvotes: 1

Matt
Matt

Reputation: 106

Your best bet here without purely using Javascript would be to include the jQuery library, by adding this to the top of your code:

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

Then, you can use the .animate() function provided by jQuery to directly change the opacity property of whatever selector you want. There is also the .fadeIn(),.fadeOut(), and .fadeToggle() functions, but that doesn't give you direct access to the CSS properties like you want. Here's an example of how to use .animate() to toggle the opacity over a period of time:

This fades the opacity to 0 over 400 milliseconds: $('#my-selector').animate({opacity: 0},400);

This fades the opacity back to 100 over 400 milliseconds: $('#my-selector').animate({opacity: 100},400);

.animate() documentation: http://api.jquery.com/animate/ fade documentation: https://api.jquery.com/category/effects/fading/

jQuery is the easiest to use and most popular JavaScript library used in professional development.

Upvotes: 0

Related Questions