CODEWITHSUNDEEP
jquerycss
rook21
rook21

Reputation: 149

Need to get a div to show itself two seconds after the page loads

I need the .affor div to transition in 2 seconds after the page loads; I'm trying to do this with jquery, any advice?

$(document).ready(function(){
  $('.affor').hide(function(){
    $(this).delay(function(){
      $(this).show();
    });
  });
});
.affor{
  width:200px;
  height:200px;
  background-color: rgb(39, 60, 79);
  /*border-radius: 100px;*/
  color:white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  transition: 2s ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=".affor"> Hello </div>

Upvotes: 0

Views: 39

Answers (2)

Rounin
Rounin

Reputation: 29453

You can achieve this effect with jQuery.

But (perhaps even simpler) you can also achieve it with CSS @keyframes alone:

.affor {
  width:200px;
  height:200px;
  background-color: rgb(39, 60, 79);
  border-radius: 100px;
  color:white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  animation: sayHello 3s ease-out;
}

@keyframes sayHello {
  0% {opacity: 0;}
 33% {opacity: 0;}
100% {opacity: 1;}
}
<div class="affor">Hello</div>

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You have to read the manual for .delay(). Also, you should not have . inside classes. In CSS, you use . for classes. You need to use something like this:

$(document).ready(function() {
  $('.affor').hide(0, function() {
    $(this).delay(2000).fadeIn(1000);
  });
});
.affor {
  width: 200px;
  height: 200px;
  background-color: rgb(39, 60, 79);
  /*border-radius: 100px;*/
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  transition: 2s ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="affor">Hello</div>

Since your display is set to flex, the right way of fading in won't work.

Upvotes: 2

Related Questions