Fading effect malfunctioning

Question

Fading effect malfunctioning

I created a basic CSS box and am attempting to fade it by adjusting its opacity dynamically using the setInterval object.

Click here for the code on jsFiddle

CSS

#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}

JAVASCRIPT

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade=setInterval(function(){
        select("box").style.opacity-=0.1;   
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }   
    else {
        select("box").style.display="block";    
    }
}

The issue arises when the "-=" operator starts subtracting the opacity from 0 rather than 1. I'm seeking clarification on why this behavior occurs. Can someone provide an explanation?

javascript html css

Answer 1

Answer №1

Make sure to place your check regarding the opacity inside the loop.

function findElement(id) {
    return document.getElementById(id);
}


// Execute on page load
window.onload = function () {
    // Define initial variables
    var element = findElement('box'), opacity = 1, interval;

    // Start looping
    interval = setInterval(function(){
        // Update and apply opacity changes
        opacity = Math.max( 0, opacity - 0.1 );
        element.style.opacity = opacity;

        // Stop the loop when the element is no longer visible
        if ( !opacity )
            clearInterval(interval);
    },30);
};

Demo: http://jsfiddle.net/5gqRR/8/

Answer 2

Make sure to place your check regarding the opacity inside the loop.

function findElement(id) {
    return document.getElementById(id);
}


// Execute on page load
window.onload = function () {
    // Define initial variables
    var element = findElement('box'), opacity = 1, interval;

    // Start looping
    interval = setInterval(function(){
        // Update and apply opacity changes
        opacity = Math.max( 0, opacity - 0.1 );
        element.style.opacity = opacity;

        // Stop the loop when the element is no longer visible
        if ( !opacity )
            clearInterval(interval);
    },30);
};

Demo: http://jsfiddle.net/5gqRR/8/

Answer 3

Answer №2

It's not possible to assign an onload event directly to a div element. Instead, you can achieve this by implementing the following code:

XHTML

<div id="container"></div>

JavaScript

var fadeEffect;
function getElement(id) {
    return document.getElementById(id);
}
function toggleBox() {
    fadeEffect = setInterval(function(){
        getElement("container").style.opacity -= 0.1;    
    },300);
    if (getElement("container").style.opacity == 0) {
        clearInterval("fadeEffect");
        getElement("container").style.display = "none";
    }    
    else {
        getElement("container").style.display = "block";    
    }
}

window.onload = (function() {
    toggleBox();
})();

View the Demo

Additional Step

getElement("container").style.opacity = 1;  // Include this line to set initial opacity value
fadeEffect = setInterval(function(){
            getElement("container").style.opacity -= 0.1;    
        },300);

Answer 4

It's not possible to assign an onload event directly to a div element. Instead, you can achieve this by implementing the following code:

XHTML

<div id="container"></div>

JavaScript

var fadeEffect;
function getElement(id) {
    return document.getElementById(id);
}
function toggleBox() {
    fadeEffect = setInterval(function(){
        getElement("container").style.opacity -= 0.1;    
    },300);
    if (getElement("container").style.opacity == 0) {
        clearInterval("fadeEffect");
        getElement("container").style.display = "none";
    }    
    else {
        getElement("container").style.display = "block";    
    }
}

window.onload = (function() {
    toggleBox();
})();

View the Demo

Additional Step

getElement("container").style.opacity = 1;  // Include this line to set initial opacity value
fadeEffect = setInterval(function(){
            getElement("container").style.opacity -= 0.1;    
        },300);

Fading effect malfunctioning

Answer №1

Answer №2

Additional Step

Similar questions

I'm struggling to make a div stretch across the full width of the screen

Navigating through a large array list that contains both arrays and objects in Typescript:

It seems that CSS shadows are working perfectly on Firefox and Chrome, but unfortunately, they are not displaying on

Issue encountered: A TypeError was thrown indicating that variable 'b' is not a function within a nodejs(e

Issues with displaying markers on Google Maps API using JSON and AJAX

Content that can be scrolled within a React.Box container

To enhance the user experience and improve performance, I will be implementing pagination on this page to efficiently display a dynamically generated set of elements

Create a resizable textarea within a flexbox container that allows for scrolling

The header does not appear to be responding to CSS floats

Ways to showcase information within the Uppy Dashboard Modal

Issue with EnumDeserializer in jackson-mapper 1.9.12 version

Angular: Array in the template re-renders even if its length remains unchanged

Streaming the request body in NodeJS using ExpressJS without buffering

What methods can I implement to showcase random images in JavaScript using a JSON array value?

Update the overflow property to overflow-auto instead of overflow-visible when the element exceeds the size of the viewport

Retrieving data from a material-ui Button component in a React application

Button-controlled automated presentation

Linking two div elements together with a circular connector at the termination point of the line

MUI Input component does not support the use of the oninput attribute

Transitioning from Bootstrap 4 to Bootstrap 5 raises concerns about container compatibility