Conceal object after a brief pause

Why does the element hide immediately instead of slowly fading out? I can't figure out why it doesn't first display the "P" tag and then gradually hide it. Please help me solve this issue.

var step = 0.1;
var delay = 90000;
var displayMe = function() {
  if (element.style.opacity < 1) {
    element.style.opacity += step;
    setTimeout('displayMe()', delay);
  }
}

var hideMe = function() {
  var elem = document.getElementById('regform');
  if (elem.style.opacity >= 0) {
    elem.style.opacity -= step;
    setTimeout('hideMe ()', delay);
  }
}

hideMe();
<p id="regform">aaaaaaaaaaaaaaaaa</p>

javascript

Answer №1

When using <code>Element.style.prop
, it will only read inline styles. Therefore, make sure to define style='opacity:1' for the <p> element.

var step = 0.1;
var delay = 1000;

var displayMe = function() {
  if (element.style.opacity < 1) {
    element.style.opacity += step;
    setTimeout(displayMe, delay);
  }
}

var hideMe = function() {
  var elem = document.getElementById('regform');
  if (elem.style.opacity >= 0) {
    elem.style.opacity -= step;
    setTimeout(hideMe, delay);
  }
}

hideMe();
<p id="regform" style='opacity:1'>aaaaaaaaaaaaaaaaa</p>

Answer №2

Experience it for yourself

 document.getElementById('loginform').style.opacity=1;
 var fadeOut = function()
 {
    var element = document.getElementById('loginform');
    if(element.style.opacity>0)
    {
        element.style.opacity-= 0.1;
        setTimeout(fadeOut, 100);
    }
 }
 fadeOut();

See Demo

Answer №3

Experience the power of jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
      $(document).ready( function() {
        $('#regform').delay(1000).fadeOut(2000);
      });
</script>

<p id="regform" style='opacity:1'>aaaaaaaaaaaaaaaaa</p>

Check out the .fadeOut() Documentation

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

Showing dummy data in demo mode with an AngularJS table

I stumbled upon this interesting jsfiddle http://jsfiddle.net/EnY74/20/ that seems to be using some demo data. If you check out this example https://jsfiddle.net/vsfsugkg/2/, you'll notice that the table originally has only one row, but I modified it ...

javascriptjqueryangularjspaginationjquery-pagination

Updating objects in Angular 8 while excluding the current index: a guide

this.DynamicData = { "items": [ { "item": "example", "description": "example" }, { "item": "aa", "description": "bb" }, ...

javascriptangularangular8

Nodejs registration and user verification process for accessing account features

I am facing a decision on how to handle two types of users - vendors and buyers. Should I develop separate APIs for registering and authenticating each user type, or should I create a single API to manage both? When designing my database model, should I h ...

javascriptnode.jsmongodbexpress

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

javascriptjqueryhtmlcss

What methods are available for retrieving specific XML entries using JavaScript?

Hey there, I'm dealing with this XML code <book> <bookname>book1</bookname> <author>authorman</author> </book> <book> <bookname>book2</bookname> <author>authorperson</author> </book ...

javascriptajaxxml

Generate dynamic forms utilizing JSON data

I am in the process of developing an application that enables users to answer questions about themselves. The questions are being retrieved from an API. My next step is to generate a form with these questions as entry fields. I am currently utilizing a met ...

javascripttypescriptangularionic2

Callback is triggered after ng-if removes the directive from the scope

A scenario on my page involves an angular directive nested within ng-if. I've developed a service that features a function, let's name it functionX, capable of accepting a callback as an argument. Whenever the ng-if condition becomes true, the ...

javascriptangularjsangularjs-directivecallbackangularjs-scope

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

javascriptcssreactjsreact-routerreact-router-dom

Error 405: Javascript page redirection leads to Method Not Allowed issue

After receiving the result from the ajax success method, I am facing an issue where the redirection to another page is being blocked and displaying the following error: Page 405 Method Not Allowed I am seeking suggestions on how to fix this as I need to ...

javascriptajaxasp.net-web-api

Why is it necessary to decode JSON stringified objects in Vue props?

When passing a stringifyed object via props to a component, it seems like there is an issue with the data transformation. <my-component :filter="stringobject" ></my-component> stringobject = "{"search_text":"(ciCl ...

javascriptjsonvue.jsstringifyvue-props

The rows in the React table are refusing to change color despite the styles being applied; instead, they are coming back

Hey there, Green Dev here! I've been working on a React table where I'm trying to conditionally change the row color. The styles are being passed in, but for some reason they return as undefined. Strangely enough, when I remove my logic and simpl ...

javascriptnode.jsreactjsjavascript-objects

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

Analyze the JSON data retrieved from the API endpoint to determine any

I am currently attempting to utilize axios to send an API request in order to validate login credentials, but I am facing difficulties retrieving the result from the API. The MongoDB .find function successfully locates the correct row, however, I am encoun ...

javascriptreactjsapi

What is the reason behind the error "Uncaught SyntaxError: Malformed arrow function parameter list" when using "true && () => {}"?

When the code below is executed: true && () => {} it results in an error message stating: Uncaught SyntaxError: Malformed arrow function parameter list Why does this happen ? Update: I am aware that wrapping the function in parentheses reso ...

javascriptnode.jslogiclogical-operators

Learning how to implement react-toastify promises with axios is a valuable skill to have

// I am trying to implement toastify promises to show a spinner while fetching data and then display a success or failed message // However, I am encountering an error in the code below const fetchData = () => { axios .get("https://restc ...

javascriptreactjsaxiosreact-toastify

The request body parser for the express POST method appears to be devoid of

After encountering similar issues on Stack Overflow, I discovered a solution involving the use of: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); However, despite implementing this solution, the log for req.body is still ...

javascriptangularjsnode.jsexpress

Having trouble with setting up ENV variables while deploying the app on Heroku

I recently deployed my node.js app to Heroku, and I'm facing some issues with its functionality. The app loads fine, but when I try to sign in, it breaks down. It seems like the environment variables are not loading correctly, specifically the db vari ...

javascriptnode.jsexpressherokumongoose

Submitting forms that contain files using jQuery and AJAX

Despite searching through numerous questions on this topic, I have yet to find a solution to my specific issue. My objective is to successfully submit an entire form, potentially containing files as well. The code I currently have is not working: $(target ...

javascriptphpjqueryajaxforms

The functionality of wp_script_is in WordPress seems to be malfunctioning when it comes to

I need to load a certain file only after a specific script has finished loading. Wordpress offers a useful method called 'wp_script_is' for detecting if a script has loaded or not. When I use the jquery handle with "done", it functions as expecte ...

javascriptphpwordpresswordpress-theming

Receive JSON data in URL as an array in PHP

What I aim to accomplish is: I have a JSON object structured like below var foo = { format:"json", type:"test", id:"26443" }; and my goal is to convert it into a URL in the following format 'http://example.com/a:3:{s:6:"format";s:4:" ...

phpjavascriptjqueryjsonarrays