• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to Make an Element Disappear from the Screen Without It Glitching?

dlps

New Coder
So, I attempted three different ways to make an element disappear completely from the screen (displayed in the code below). Whenever I refresh the page, for each solution I tried, it has a glitch of some sort. By glitch, I mean, when I refresh the site, it shows the original text and quickly takes the text off. I'm wondering if there is a way of preventing this from happening by doing it in some alternative way.

JavaScript:
// WAY 1
document.getElementsByTagName(element)[pos];
thisElement.remove();

// WAY 2
document.getElementsByTagName(element)[pos];
thisElement.style.display = 'none';

// WAY 3
document.getElementsByTagName(element)[pos];
thisElement.style.visibility = 'hidden';
 

abhiweb_admec

New Coder
The effect can be created with the combination of using both opacity and display none properties. Firstly start decreasing the value of the opacity to 0 and when it becomes zero then check for it and apply display none this will appear as the element is becoming transparent and after that its gone.

To get a better control over the animation check out this article related to animations.
 
Last edited by a moderator:

Top