CODEWITHSUNDEEP
javascriptopacity
msbg
msbg

Reputation: 4962

How to increase opacity in javascript?

I would expect to be able to use

element.style.opacity += 0.1;

or

element.style.opacity = element.style.opacity + 0.1;

but this does not work. The opacity does not change. If I set the opacity to a static value, like

element.style.opacity = 0.5;

it does work. What am I doing wrong?

Upvotes: 4

Views: 5958

Answers (6)

Ruby Alliston
Ruby Alliston

Reputation: 1

Pure vanilla JS, worked for me. This function changes opacity every time mouse hovers over the box (div).

let div;

function changeOpacity(){
    let defaultOpacity = 0.1;
    div.addEventListener('mouseenter', function(){
        this.style.backgroundColor = currentColor.value;
        defaultOpacity += 0.1;
        this.style.opacity = defaultOpacity;
});
};

Upvotes: 0

Kris
Kris

Reputation: 1

You can use also .toString(); method

Upvotes: 0

Mr.YellowMan
Mr.YellowMan

Reputation: 98

You might want to make keyframes setup in css and add the id or class to the element

Example for calling a keyframe:
.myElement{
position:absolute;
background:blue;
-webkit-animation:KeyframeName 1s linear infinite;
}

Example for a keyframe:
@-webkit-keyframes KeyframeName {
0%{style code here, example: opacity:1;}
100%{style code here, example: opacity:0;}
}

The only down sides are: - you have to make a keyframe setup for all browsers. - on mobile devices it takes alot of power, meaning you page becomes un-touchable or onclickable. And makes it hard to use many keyframes at once.

Or

Try making a function in javascript and put this code in it:

var OpacityValue = 1;
function OpacityChange(){
    if(OpacityValue == 0.0){
        Opacity = 0.0;
        clearInterval(TimerName);
     }
     else if(OpacityValue > 0){
        OpacityValue += -0.1;
     }
     yourElement.style.opacity = OpacityValue;
}

Launch this function with a timer an you got you opacity that will stop when its at a value of 0.0 Don't forget to place a var TimerName ; as global, otherwise you cant stop the timer!

Upvotes: 0

UncleSaam
UncleSaam

Reputation: 356

It occurred to me that you can actually decrease the opacity by a string factor, as following:

element.style.opacity -= '0.1';

And that will work just fine, but not the opposite since the operator += tries to append to the resulting string. Increment can however be achieved by doing

element.style.opacity -= '-0.1';

Which will increment it as wanted.

Upvotes: 4

David Thomas
David Thomas

Reputation: 253318

I'd suggest the following, which assigns a predefined value for opacity if it's not already defined:

// using a simple onclick for demo purposes
t.onclick = function(){
    var opacity = this.style.opacity;
    this.style.opacity = opacity ? (parseFloat(opacity) + 0.1) : 0.2;
};​​​

JS Fiddle demo.

This seems to be necessary because the value doesn't seem to be incremented if the opacity isn't already defined in the in-line style attribute. If that's where yours is defined then this approach may not be necessary.

Upvotes: 2

Quentin
Quentin

Reputation: 943569

element.style.opacity (assuming it is defined at all) will be a String, not a Number.

"0.1" + 0.1 === "0.10.1"

You probably want:

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

Upvotes: 9

Related Questions