2

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>

Improve this question
2
  • You say you don't want to use javascript yet you have javascript in the title and a tag. Commented Jun 20, 2016 at 17:21
  • 3
    @Rob I'm pretty sure the OP meant not animating the property with a bunch of setTimeout calls but just letting the transition property of CSS do its work Commented Jun 20, 2016 at 17:23

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you Juan, that was just what I'm looking for. Those are new commands for me, I knew there had to be a simple way of doing it. Thank you so much. :)
0

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.

Improve this answer

3 Comments

Sorry, but there are no jQuery tags, you should not suggest jQuery, specially for such a trivial example. See meta.stackexchange.com/questions/45176/…
@JuanMendes Someone new to JavaScript, which the poster stated they are, may not be aware of the jQuery library, which may be useful to them in this situation.
It could be useful, but it's wasteful when the answer to the question they posted is actually really simple and your answer doesn't address the problem that was stated by the OP

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.