0

I have a 'div' that I 'fadeOut' after pressing a button using javascript. After the 'div' has faded out I would like it to 'fadeIn'. This is presently not happening for me. I understand the concept of the callback function but I appear not to have succeeded in implementing it in my code. Please can someone advise? I would like a callback function solution if that is possible.

function fade_effect(element, callback) {

  var x = function(element) {
    var elem = document.getElementById(element);
    elem.style.transition = "opacity 2.0s linear 0s";
    elem.style.opacity = 0;
    return elem;
  }

  var thisElement = x(element);
  fadeIn(thisElement);
}

function fadeIn(element_input) {
  element_input.style.transition = "opacity 2.0s linear 0s";
  element_input.style.opacity = 1;
}
div#box1 {
  background: #9dceff;
  width: 400px;
  height: 200px;
}
<button onclick="fade_effect('box1',fadeIn);">Magenta</button>
<div id="box1">Content in box 1 ...</div>

Improve this question
4
  • 1
    might it be because your fadeIn function is accepting a element_input attribute and you're trying to use elem inside the function? Commented Apr 16, 2015 at 14:45
  • x() takes one argument, why are you calling it with two arguments? Commented Apr 16, 2015 at 14:50
  • fade_in is using a variable elem that hasn't been defined. There's a variable with this name in x, but its scope is local to that function. Commented Apr 16, 2015 at 14:51
  • @Barmar, I have fixed the one argument x() issue. as the code stands above, nothing actually works, no fading out nor in. Commented Apr 16, 2015 at 15:02

2 Answers 2

Reset to default
2

It looks to me like you're trying to overcomplicate things. Knowing that the transition lasts 2 seconds, you can use a simple JavaScript timeout to fade it back in when it has completed.

function fade_effect(element){
    var elem=document.getElementById(element);
    elem.style.transition="opacity 2s linear";
    elem.style.opacity=0;
    setTimeout(function(){
        elem.style.opacity=1;
    },2000);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That assumes that JavaScript and CSS both use accurate timers (they don't) and requires that you maintain the two seconds in two different places.
True on both points. However, in all the time I've been using setTiemout to delay an action until a transition has completed, I've never seen the discrepancies be noticeable to the naked eye. For maintenance purposes, if necessary, a variable could be used to hold the time instead.
it it possible to get a callback solution similar to the one I am trying to get above?
@dave See the duplicate question, it answers your question preciselyl.
0

Your variable names are just mis-matched on the fadeIn function. 

function fadeIn(element_input) {
  element_input.style.transition = "opacity 2.0s linear 0s";
  element_input.style.opacity = 1;
}
Improve this answer

2 Comments

fixed it. still not working
I mis-read. it looked at first glance like fixing the javascript exception was what you were after. It looks like you want to write a pure javascript animation for fadein/out. If you are using jquery already though, it would be easier with that. Check that out here: stackoverflow.com/questions/23244338/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.