JavaScript: Opacity should reduce to 0 and then become negative

Question

I have a javaScript function.

JavaScript:

function opacZero(object){
    var presentOpacity = (object.style.opacity);
    object.style.opacity =presentOpacity-0.2;
    setTimeout( function(){opacZero(object)}, 40);
}

Now when I pass som eobject to this function, its opacity should reduce till 0 and go beyond 0 (as I am not clearing the timeout anywhere). But this is not happening. The opacity reduces to 0.20000000000000007 and reduces no more. But when I subtract 0.3 (or more) instead of 0.2, it is giving the desired result. But why not with numbers less than 0.2. I have no idea why this is happening. Help PLease

I don't think the browser will like you for wanting negative opacity. How should that be implemented? — John Dvorak, Mar 23 '13 at 05:28
Thats okay! but logically it should go beyong 0 which is happening perfectly when I subtract 0.3 or more. But not when I am subtracting 0.2 or less. Why is it so? — Navneet Saini, Mar 23 '13 at 05:30
Why it should go beyond 0 ? its setTimeout not setInterval function — kirugan, Mar 23 '13 at 05:42
@Juhana I want the test to completely disappear. How to do that? — Navneet Saini, Mar 23 '13 at 06:01
When opacity is < 0.3, then set style `visibility: hidden` or `display; none`. You're probably dealing with floating point inaccuracies. — jfriend00, Mar 23 '13 at 06:09

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

This is due to how Javascript handles floating point numbers. Check out this SO question for some suggestions on how to work around it.

EDIT

Here's a way to work around it:

function opacZero(object){
    var presentOpacity = Math.floor(object.style.opacity * 10);
    object.style.opacity = (presentOpacity - 2) / 10;
    setTimeout( function(){opacZero(object)}, 40);
}

edited May 23 '17 at 12:11

Community

1
1

answered Mar 23 '13 at 06:10

bmceldowney

2,307
13
19

Solved the Problem. Thanks – Navneet Saini Mar 23 '13 at 06:22

jfriend00 · Answer 2 · 2013-03-23T06:46:36.993

Seems a little more straightforward to just check for the troublesome small values and force those to 0. Also probably a good idea to stop the timer once you hit 0:

function opacZero(object){
    var newOpacity = object.style.opacity - 0.2;
    if (newOpacity < 0.2) {
        newOpacity = 0;
    }
    object.style.opacity = newOpacity;
    if (newOpacity !== 0) {
        setTimeout(function(){opacZero(object)}, 40);
    }
}

Working demo: http://jsfiddle.net/jfriend00/8qkFN/

Or, if you want something briefer:

function opacZero(object){
    object.style.opacity = object.style.opacity < 0.4 ? 0 : object.style.opacity - 0.2;
    if (object.style.opacity != 0) {
        setTimeout(function(){opacZero(object)}, 40);
    }
}

score 0 · Answer 3 · answered Mar 23 '13 at 06:31

This is a possible work around:

function opacZero(object){
    curOpac = curOpac < 0.1 ? 0 : curOpac - 0.2;
    object.style.opacity = curOpac;
    setTimeout( function(){
        opacZero(object)
    }, 400);
    console.log( curOpac );
}

var test = document.getElementById( 'test' ),
    curOpac = 1;
test.style.opacity = 1;
opacZero( test );

http://jsfiddle.net/daCrosby/bhTNC/1/

JavaScript: Opacity should reduce to 0 and then become negative

3 Answers3

Linked