Fading Divs using JavaScript

Question

Hey Guys I am having trouble fading out a Div in my HTML document. I am able to use the same function reversed and am able to fade the divs in as required but not out. Any ideas?

Here is the JavaScript function:

function fadeOut(node, duration) {
    var increments = 100;
    var increment_value = 1/increments;
    var interval = duration/increments;
    var opacity = 1;

    var repeater = setInterval( function() {
        if (opacity > 0) {
            opacity = opacity - increment_value;
            node.style.opacity = opacity;
        } else {
            clearInterval(repeater);
        }
    }, interval);
}

Whats the code for your fadeIn which is working. Are you sure it's being stopped? I'd say it's quite likely your fadeIn interval is still going and the 2 events are just cancelling each other out. Can you make a jsfiddle demonstrating the problem? — James
– James, Commented Sep 4, 2014 at 11:36
BTW, there's no need to use extra variable for opacity value. And don't forget to set opacity equals zero at last iteration. — Novelist
– Novelist, Commented Sep 4, 2014 at 11:41
@SyedAliTaqi are you suggesting to use a huge library for a tiny piece of code? i'd ask why not use css transition instead... — T J
– T J, Commented Sep 4, 2014 at 11:47

KooiInc · Accepted Answer · 2014-09-04 12:26:37Z

2

You can use css-transitions to fade in/out (in other words: leave the actual fading to the browser):

Let's have an element

<div id="fader"> fader
  <div data-dofade="1">Let us fade in/out</div>
</div>

For this element the following css

#fader div {
    opacity: 1;
    transition: all ease-in 1s 0s;
}

#fader div.fadeout {
    opacity: 0;
    transition: all ease-out 1s 0s;
}

Now you can use this handler to fade the div within div#fader in or out:

document.querySelector('#fader').addEventListener(
        'click',  
        function(e){
          var fadeEl =  this.querySelector('[data-dofade]');
          fadeEl.className = /fadeout/i.test(fadeEl.className)  ? '' : 'fadeout';
        }
);

Feel free to fiddle around with it in this jsFiddle (contains a scripted fader too).

Collectives™ on Stack Overflow

Fading Divs using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related