1

Im a total noob and need some help on a function which I would think for most of you would be quite simple. I am trying to do this with pure Javascript and not JQuery. I have been trying for hours and I cant get it.

What I am trying to achieve is to have a function repeat every time I click on a link.

To be more specific I currently have text that fades in when clicking a link and I would like it to always perform the fade in when I click on it (as if you were to refresh the page).

Basically: Click link (x) -- Text Fades in -- click link (x) -- same text disappears and then fades in from beginning of transition/animation (no fade out) -- repeat

I have come across something very similar on W3 schools which shows a function starting from the beginning every time you click the button: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar

I thought that modifying this was the answer but because I am trying to change the opacity, I have seen that I have to add a parseFloat to the function because it is a string but I am having no success. The example is:

else { i.style.opacity = parseFloat(i.style.opacity) + .1; }

To throw another spanner in the works, I am using the opacity value from the color:rgba(0,0,0,0) to change the opacity. I thought this may be easier to find since the above example would (in my mind) bypass the parseFloat thing as you would be using i.style.color but I could not find anything.

Below is my code based on a variation of the W3 schools tutorial. I'm pretty sure that clearInterval in JS has a big part to play in what I need. Very much appreciate any help for this and please let me know if you need more clarity :)

<!DOCTYPE html>
<html>

<style>

#about {
  color: rgba(10,10,10,0);
  transition: color 1s linear 1s;
}

#about:target {
  color: rgba(10,10,10,1);
  transition: color 1s linear 1s;
}    

</style>

<body>

<a href="#about" onclick="fadeIn()">About</a> 

<div id="div">

<p id='about'> Please help me figure this out. I really appreciate it</p>  

</div>

</body>

<script>
function fadeIn() {
var elem = document.getElementById("about");   
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
  if (begin == 100) {
    clearInterval(id);
  } else {
    begin++; 
    elem.style.color = begin + '1'; 
  }
 }
}
</script>

</html>
desperate4sleep
  • 13
  • 5

2 Answers2

0

There is a solution, which I am not going to present you, because the JS "hack" will take longer, compared to the CSS-trick: (looking for appropriate reference)

You wrap your stuff, which you want to fade in and out into a container (just making sure) and add a checkbox above it:

<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>

then you style your stuff: Hide the checkbox (the label is clickable) make two configs for your #about_container first: in the off mode, second in the on mode (you can comment them out for debugging purpose)

#about + #about_container

then you add the input id with pseudo-selector before the second:

#about:checked + #about_container

on your on mode, and leave the other one, like it is.

MUCH BETTER AND FASTER SOLUTION!

You should also change your question into something like: How do I make html element appear and disappear on mouse-click or other user-interaction.

Mihail Gershkovich
  • 412
  • 4
  • 9
  • NO-JS Examples: Style changer: https://www.sitepoint.com/building-style-switcher-with-pure-css-using-checked/ Show More-Less functionality: https://www.sitepoint.com/implementing-show-moreless-functionality-with-pure-css/ Disappearing menu: https://www.sitepoint.com/pure-css-off-screen-navigation-menu/ – Mihail Gershkovich Mar 12 '17 at 18:08
  • Just tried it but thats not it. I do like it however :) Thanks Mihail – desperate4sleep Mar 12 '17 at 19:13
  • if you really "need" a function to proc on a click, and act differently, depending on some state: define the state (pseudo attributes, or classes) then check for the state from inside the function and decide on it... Don't use it for styling though (disappearing menues and alike) – Mihail Gershkovich Mar 12 '17 at 19:22
0

You can use transitions and then set opacity 0.5 and after some ms change it in 1 to let it fade on click and return in the older look

Edit:

Just put fadeIn() inside another function, and before the fadeIn() executon set the opacity to 0

Edit:

JS

doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}

HTML

<a href="#about" onclick="doIt()">About</a>
Marco Salerno
  • 5,131
  • 2
  • 12
  • 32
  • Thanks for responding Marco. I should be a little clearer though. This should happen on 1 click. So theoretically, there should be no fade out but rather a restart of the functions. The W3 schools example in my question is the closest thing I can find. – desperate4sleep Mar 12 '17 at 19:03
  • So if i'm understanding, you need the fade on click but you want it to turn back the opacity as 1 without fade effect? – Marco Salerno Mar 12 '17 at 19:10
  • So, when the link is clicked, it turns from a 0 opacity to 1. When the same link is clicked again, ideally it should start from 0 opacity and go to 1 - exactly the same. The text should essentially disappear for a moment before performing the transition again. I think this is done with set interval and clear interval but I really dont know. – desperate4sleep Mar 12 '17 at 19:21
  • Answer edited give it a look if you want, it should be the solution you needed – Marco Salerno Mar 12 '17 at 19:49
  • Hi Marco, I tried what I thought might be right but to be honest, im not exactly sure what you mean. Im pretty new to all this so please bear with me. Would you mind showing me if it is not too much trouble? Thanks – desperate4sleep Mar 12 '17 at 19:58
  • Try this and let me know if it's ok – Marco Salerno Mar 12 '17 at 21:28
  • Ive tried doing a number of things with it but I still have no luck. I'm not sure if what I'm doing is correct. I am basically re-arranging elements of the function I have written and the function you have provided to try and get it working. As you can see, my knowledge is very limited. Appreciate your efforts Marco. – desperate4sleep Mar 12 '17 at 22:16