Adding animation to the CSS property of display:none changing to display:block using JavaScript

Recently, I came across a code snippet that handles the visibility of a button using JavaScript. The code includes both HTML and JavaScript portions.

HTML

<div id="butStyle">
     <button id="langBut">Language</button>
     <button id="en"><img src="image/en.png" alt="en" height="20px" width="30px"></button>
</div>

JS

document.getElementById('en').style.display = 'none';

function displayONLang(){
    document.getElementById('en').style.display = 'block';
}
function displayOFFLang(){
    document.getElementById('en').style.display = 'none';
}
document.getElementById("butStyle").addEventListener("mouseover",displayONLang); 
document.getElementById("butStyle").addEventListener("mouseout",displayOFFLang); 

Now, my objective is to enhance this functionality by adding smooth animations through JavaScript. However, I am unsure about how to achieve this effect. Any advice or suggestions would be greatly appreciated!

Answer №1

If you're looking for a simple way to add a fade in/out effect, consider using opacity instead of the display property which cannot be animated.

Here is a code snippet demonstrating how to achieve this effect by animating the opacity:

document.getElementById('en').style.opacity = '0';
document.getElementById('en').style.transition = '250ms opacity ease';

function displayONLang(){
    document.getElementById('en').style.opacity = '1';
}
function displayOFFLang(){
    document.getElementById('en').style.opacity = '0';
}
document.getElementById("butStyle").addEventListener("mouseover",displayONLang); 
document.getElementById("butStyle").addEventListener("mouseout",displayOFFLang);

In addition, I have included a transition mode customization option for the second line of code:

document.getElementById('en').style.transition = '250ms opacity ease';

This CSS attribute enables smooth transitions between different states. For more information, you can refer to the documentation here.

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

RegEx pattern designed to validate year formats in the range of 1900 to 2019 and must follow the structure YYYY/YYYY/YYYY

I have a specific requirement for the year input in my HTML form. The year must be entered in the following format: YYYY OR YYYY/YYYY/YYYY/YYYY/YYYY ...etc. Here is my pattern: First test : pattern="^((19)\d{2}\/|(20)[0-1][0-9]\/)+" Sec ...

I keep getting an error message that says "The JSX element type does not have any construct or call signatures."

I am currently developing an application that takes user input through buttons and creates an array. However, when I attempt to display the array, I encounter a JSX element type error. import { Delete } from "lucide-react" export function Passwo ...

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

How to wrap a narrower column around a shorter column using Bootstrap 4

Incorporating Bootstrap 4 into my website design, I have created a simple two column layout. The right column houses a table of contents while the left column is filled with various markup elements such as paragraphs, lists, and images. My goal is to have ...

Unable to get table borders to display correctly using CSS styling

Can someone lend me a hand with a CSS issue I'm facing? I want to create some CSS "classes" for tables in my form, but I can only get the borders to display correctly on one of the tables. Here is the code I've been using: table.paddedTable tabl ...

Why does selecting by data- attribute in jQuery fail for certain elements?

Consider this sample HTML code: <div id="details" data-type="motion"> <p>Lorem ipsum</p> </div> <img src="http://placehold.it/50x50" data-type="motion" /> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr ...

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

The ultimate HTML5 code that stands above the rest

As newcomers to mobile technology, we now have our HTML5 page operational with PHP. Our next step is to transition to mobile. Whether it's through a native app or mobile web, the specific platform doesn't matter in our current situation. What we ...

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...

Using Vue Composition API to invoke a child component's method that employs a render function

While using Vue composition-api with Vue2, I encountered an issue when attempting to call a method of a component with a render function from its parent component. Everything works fine without the render function. TemplateComponent.vue <template> ...

Bundling JSPM with an external system JS file

Currently, I am loading my Angular2 file as a System js module from a CDN. Within my project, I have multiple files importing various System js modules of Angular2. However, I am now looking to bundle my local JavaScript files using JSPM. But when I ente ...

I am wondering if it is possible to swap out an image when hovering over an icon link by only using CSS and HTML

I am working on a layout where an image is displayed in a col-8 next to 4 icons and a paragraph in a col-4. I want to keep the formatting consistent on this page. Specifically, I would like the image linked to the first icon to automatically display when t ...

Implementing Unicode support in JS/PHP code

I am currently faced with a challenge on my webpage where I utilize JavaScript to transmit data to a PHP script via AJAX POST. The issue arises when the input is in a non-Latin based language, resulting in storing unintelligible characters in the MySQL tab ...

I've encountered an issue with React Router where it is only displaying a blank page even after I have set up my

Check out app.js here. After opening the page, all I see is a blank white screen. There aren't any visible errors or indications of what might be causing this issue. ...

I attempted to create a concise instruction, yet certain lines of code failed to function correctly

I recently updated to the latest version of discord.js and am using VSC for my coding. In a separate commands.js folder, I have the following code: module.exports = { name: 'clear', description: "clear.message", ...

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

Manage an automated script that populates an input field

I am currently working on a script that checks whether the value of a variable matches the value of a hidden input, and then returns a confirmation message. The variable can be manually entered or automatically filled by another script. When the variable ...

When designing responsive websites in Bootstrap 4, what is the preferred choice between using the class "container" or "container-fluid"?

When creating responsive designs, which is more effective to use - the .container class or the .container-fluid class? ...

There is no 'depto_modules.length' property in this row. How should I go about fixing this issue?

I have a table set up to display data from an associated table. The functionality is working fine, but I keep seeing a warning message when I apply certain filters: The warning states that the property depto_modules.length does not exist in the row. It ad ...

Separate compound words without hyphens at the boundaries of each word

I am currently incorporating the use of Bootstrap for my project. Let's assume that I have text displayed in this way: "Stackoverflow" Is there a method to automatically ensure that it breaks like below if the text exceeds the container: "Stack ...