Javascript callback function not working in fadeOut/ fadeIn CSS3 Transition

Question

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>

might it be because your `fadeIn` function is accepting a `element_input` attribute and you're trying to use `elem` inside the function? — FabioG, Apr 16 '15 at 14:45
`x()` takes one argument, why are you calling it with two arguments? — Barmar, Apr 16 '15 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. — Barmar, Apr 16 '15 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. — dave, Apr 16 '15 at 15:02

score 2 · Answer 1 · answered Apr 16 '15 at 14:48

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);
}

answered Apr 16 '15 at 14:48

Shaggy

6,696
2
25
45

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. – Quentin Apr 16 '15 at 14:50
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. – Shaggy Apr 16 '15 at 15:01
it it possible to get a callback solution similar to the one I am trying to get above? – dave Apr 16 '15 at 15:06
@dave See the duplicate question, it answers your question preciselyl. – Barmar Apr 16 '15 at 15:06

score 0 · Answer 2 · answered Apr 16 '15 at 14:52

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;
}

answered Apr 16 '15 at 14:52

Andrew Walters

4,763
6
35
49

fixed it. still not working – dave Apr 16 '15 at 15:00
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: http://stackoverflow.com/questions/23244338/pure-javascript-fade-in-function – Andrew Walters Apr 16 '15 at 15:15

Javascript callback function not working in fadeOut/ fadeIn CSS3 Transition

2 Answers2