What is the process for creating a fade out effect with JavaScript?

https://i.sstatic.net/1qgWt.png

Is there a way to create a fade out effect in JavaScript? In the image provided, you can see that when you click on a day, a box slides down. If you click on another day, the previous box slides back up while a new box slides down to replace it.

function mon() {

    var elem = document.getElementById("box");
    document.getElementById("box").style.background = "#ffba08";
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 200) {
            clearInterval(id);
        } else {
            pos++
            elem.style.top = pos + "px";
        }
    }
}

This is the code I use for implementing this JavaScript effect.

Answer №1

function makeElementDisappear() {
  var element = document.getElementById("target");
  var effect = setInterval(function () {
    if (!element.style.opacity) {
      element.style.opacity = 1;
    }
    if (element.style.opacity > 0) {
      element.style.opacity -= 0.05;
    } else {
      clearInterval(effect);
    }
  }, 20);
}

document
  .querySelector("#target")
  .addEventListener("click", makeElementDisappear);
#target {
        height: 100px;
        background-color: orangered;
        font-size: 20px;
        color: white;
        transition: background 1s ease-out;
      }
<div id="target">Click to make me fade</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind not being able to assign identical names to my SailsJS models and MySQL tables?

Recently diving into Sails JS, I found myself in unfamiliar territory with RESTful APIs. Following the guide, I created a User model to correspond with my existing users table. Adding attributes based on the table's columns was straightforward, and a ...

What is the process for updating the ID within a Select2 ajax script function?

I am facing an issue with my select2 ajax script. The unique_ID in my table field is named "no", which is causing me to be unable to select an item in Select2 drop down. However, when I changed the name of my database table field from "no_donatur" to "ID", ...

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

Incorporating Tabs with HTML, CSS, and jQuery

After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...

Identifying a web application functioning as a homescreen app within the Android Stock Browser

We are in the process of developing a web application that needs to function as a standalone or homescreen app. While we can identify if it is being accessed from Chrome or Safari using window.navigator.standalone or window.matchMedia('(display-mode: ...

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

Protractor functions perfectly on localhost, but encounters a Timeout error when used remotely - the asynchronous callback was not executed within the specified timeout period

Running protractor protractor.conf.js --baseUrl=http://localhost:4200/ executes successfully by filling data, validating elements, etc. However, when attempting to test the same website through a remote URL protractor protractor.conf.js --baseUrl=http://t ...

HTML - Retain placeholder text while user inputs

My input is structured like this: <input value="My text" placeholder="Placeholder"> Typing in the input causes the placeholder text to disappear, which is expected. However, I am looking to keep the placeholder text visible as a background behind ...

Tips for recognizing users in socket.io?

I'm currently developing a chat application with socket.io. However, one issue I am facing is identifying the sender of a message. Unlike in Express where we have the "req" (request) variable to easily identify users, socket.io does not provide such f ...

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

Information not reaching the server from the form

Whenever a user clicks on a button within the search results of a query, a form pops up in a modal. This form consists of three input fields and additional fields that are added to it through ajax when the submit button is clicked. In my Django application ...

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

Express.js experiencing difficulty integrating with Share.js

When it comes to Server-Side code, var express = require('express'); //Web Framework var app = express(); var http = require('http').Server(app); //HTTP server module var connect = require('connect'), sharejs = require(&a ...

Unveil as you scroll - ScrollMagic

I am working on a skill chart that dynamically fills when the document loads. I am exploring the possibility of using ScrollMagic to animate the chart filling as the user scrolls down. After trying various combinations of classes and pseudo-classes in the ...

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

interactive switch using font awesome icons and jquery

Initially, I assumed this would be an easy task, but I've encountered some difficulties in making it function smoothly. Although I am able to toggle once using .show and .hide, I am unable to toggle back. Any assistance would be greatly appreciated. ...

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

What is the best way to align two span tags to the right on separate lines?

I am facing an issue with the positioning of three span tags: A is floated left while B and C are floated right. My desired layout is to have C positioned below B, both floating right on separate lines. I attempted using display:block for B but it did not ...

Displaying WordPress plugin queries in a linked file

I have been working on developing a custom WordPress plugin that involves querying a database based on user input and then displaying the results in an HTML file with links. While I have managed to successfully display the HTML page, I am facing an issue w ...

What causes the error of inputRef.current being null in CurrencyTextField?

When attempting to target the second 'CurrentTextField' after changing the value of the first 'CurrentTextField', an error occurs stating 'inputRef.current is null'. import React, {useRef } from 'react'; import Curr ...