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

Accessing information from Next.js API endpoint in a Next.js web application

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

Utilizing JavaScript Fetch with User Input to Integrate OpenWeather API Retains Previous Data on HTML Page

Having difficulty accessing POST data through $.ajax request

ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

CakePHP includes built-in jQuery pagination and sorting functionality

Tips for updating property values when calling a TypeScript function

How to make a routerLink clickable within an anchor tag in Angular 6

`Month filter functionality optimized`

How can I retrieve the line number of a code during runtime in JavaScript?

Learning how to implement server side rendering in React JS through tutorials

How can you use Dart to uncover the content within an H1 element on an HTML webpage?

Avoiding the appearance of a scrollbar when content extends beyond its containing block

Node responds with a 404 error upon receiving the post request

Transfer the index of a for loop to another function

Maintaining a reference to an element while binding event handlers in a prototype

jQuery - patience is required until all elements have completely faded away

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

What is the best way to construct a JSON object for React based on the data from a JSON API response?

Customized Pagination Text for DataTable