Adding to opacity in javascript is not working properly

Question

lu.style.opacity = lu.style.opacity += 0.01;
This is part of my non-jquery fade in function for a page where i want to have a fadeIn feature but not jquery.
I'm putting an alert on the function to see what the opacity is, and every time it is 0.01, so why is it only being added on one time?

The function I use

function fadein(lu,time){
if (lu.style.opacity<1)
  {
    lu.style.opacity = parseFloat(lu.style.opacity, 10) + 0.01; //add 0.01 to the opacity
    setTimeout(function(){fadein(lu,time)},time/100) //sets a timeout to the fadeIn function every time/100 miliseconds
  } 
}

Add an alert before that code so that you can see what value it is originally. — Pointy
– Pointy, Commented Oct 1, 2013 at 18:32

kzh · Accepted Answer · 2013-10-01 18:43:30Z

5

Opacity is a string. You are doing string concatentation when you add to it.

console.log(typeof lu.style.opacity);
// "string"

Make sure that you are adding numbers:

lu.style.opacity = parseFloat(lu.style.opacity) + 0.01;

In case parseFloat returns NaN, this may be helpful:

lu.style.opacity = (parseFloat(lu.style.opacity) || 0) + 0.01;

Now the reason why you were not seeing a value change is this:

lu.style.opacity;
// originally empty string: ''
lu.style.opacity += 0.01
// translates to: lu.style.opacity = '' + 0.01
// which equals '0.01' which is valid, but when you do it again:
lu.style.opacity += 0.01
// it is doing this: lu.style.opacity = '0.01' + 0.01
// which is: '0.010.01'
// which is an invalid value for that css style so it retains the previous value of '0.01'

edited Oct 1, 2013 at 18:43

answered Oct 1, 2013 at 18:35

kzh

20.8k13 gold badges77 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kzh Over a year ago

@user2751288 No thanks are required, but upvotes and accepts are always appreciated.

Nicolas Straub Over a year ago

Particularly an accept, so the next person that comes looking knows this is the answer

Sanjo · Accepted Answer · 2013-10-01 18:35:52Z

1

Opacity is a string.
The syntax is wrong (that +=).

lu.style.opacity = parseFloat(lu.style.opacity) + 0.01;

answered Oct 1, 2013 at 18:35

Sanjo

1,26010 silver badges11 bronze badges

Comments

jcarpenter2 · Accepted Answer · 2013-10-01 18:34:45Z

0

I think you meant either

lu.style.opacity += 0.01;

or

lu.style.opacity = lu.style.opacity + 0.01;

answered Oct 1, 2013 at 18:34

jcarpenter2

5,4944 gold badges27 silver badges53 bronze badges

Comments

Bucket · Accepted Answer · 2013-10-01 18:37:20Z

0

Throw it in a while loop to monitor your progression towards your target opacity:

var TARGET_OPACITY = 60.0;
while(lu.style.opacity < TARGET_OPACITY) {
    lu.style.opacity = parseFloat(lu.style.opacity, 10) + 0.01;
}

answered Oct 1, 2013 at 18:37

Bucket

7,5599 gold badges38 silver badges48 bronze badges

Comments

Shreedhar · Accepted Answer · 2013-10-01 18:41:36Z

0

I think you are not adding up correctly

lu.style.opacity = parseFloat(lu.style.opacity) + 0.01;

as @Pointy commented, try putting alert before u add up and after you add up.

edited Oct 1, 2013 at 18:41

answered Oct 1, 2013 at 18:34

Shreedhar

5,6903 gold badges25 silver badges27 bronze badges

2 Comments

Denys Séguret Over a year ago

It's cleaner but this should give the same result.

Shreedhar Over a year ago

@dystroy you are right mate. lu.style.opacity is string and he is trying to add float to string. i am editing my answer though!

Collectives™ on Stack Overflow

Adding to opacity in javascript is not working properly

The function I use

5 Answers 5

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The function I use

5 Answers 5

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related