CODEWITHSUNDEEP
javascripthtmljquerycss
kj123
kj123

Reputation: 41

How can I fadeIn and fadeOut a div after a certain amount of time HTML / CSS

I have this one div that contains text and then after a certain amount of time I want that div to fade out then another div fades in. I have tried this and the second div does not fade in:

  $(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>

Upvotes: 0

Views: 788

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You can set the .content div to display:none initially and fadeIn once the .preload is set to fadeOut()

Also the seconds you have added are too low for div to show its fadeIn or fadeOut effect. At least use 2000 equivalent to 2 seconds fadeOut effects.

Live Demo:

$(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>

Upvotes: 1

Related Questions