Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

Question

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result:

  $(function() {
    $(".preload").fadeOut(20, function() {
        $(".content").fadeIn(20);        
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload">
    <h1>1st page</h1>
   
</div>

<div class="content">
<h1>2nd page </h1>

</div>

javascript html jquery css

Answer 1

Answer №1

If you want the .content div to be hidden initially and then fade in once the .preload has faded out, you can achieve this by setting the initial display to none for .content. Make sure to use a fadeIn effect that lasts at least 2000 milliseconds (equivalent to 2 seconds) for it to have a noticeable effect.

The timing you've set for the animations might be too short for the fade effects to be easily visible. Consider adjusting the duration if necessary to ensure a smooth transition between the elements.

See the Live Demo below:

$(function() {
  $(".preload").fadeOut(2000, function() {
    $(".content").fadeIn(2000);
  });
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>First page </title>
</head>

<body>
  <div class="preload">
    <h1>1st page</h1>

  </div>

  <div class="content">
    <h1>2nd page </h1>

  </div>
</body>

</html>

Answer 2

If you want the .content div to be hidden initially and then fade in once the .preload has faded out, you can achieve this by setting the initial display to none for .content. Make sure to use a fadeIn effect that lasts at least 2000 milliseconds (equivalent to 2 seconds) for it to have a noticeable effect.

The timing you've set for the animations might be too short for the fade effects to be easily visible. Consider adjusting the duration if necessary to ensure a smooth transition between the elements.

See the Live Demo below:

$(function() {
  $(".preload").fadeOut(2000, function() {
    $(".content").fadeIn(2000);
  });
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>First page </title>
</head>

<body>
  <div class="preload">
    <h1>1st page</h1>

  </div>

  <div class="content">
    <h1>2nd page </h1>

  </div>
</body>

</html>

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

Answer №1

Similar questions

How can I create an asynchronous route in AngularJS?

Retrieving data from Firebase query and displaying as an array of results

Having trouble with transferring JSON data as a string from POSTMAN to a node server

steps for setting up babel-cli and babel-preset-react

Prevent clicking on form until setInterval has been cleared using React useEffect

Technique in CSS/SASS to repair a div

Enhancing Highcharts: Extending Tooltip Functionality

Retrieve the XML file from the webpage and save it to a specific directory using Java and the Selenium framework with the Chrome browser

The jQuery .animate function seems to be malfunctioning

The dynamic duo of jQuery and setTimeout

Error encountered: Unexpected identifier in Reactjs code

The expiry date of the cookie remains unchanged

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Divs are stubbornly resisting the urge to behave like block elements

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

What is causing the divs to remain stationary instead of floating away with BootStrap?

"Troubleshooting problem: Table rendering incorrectly outside of its designated div

"Modify hyperlink attributes to enhance security and optimize user experience

I would like to use a tabset row to showcase buttons in Angular 2

Guide on how to include an .env file within an HTML script tag?