Question

我需要.affor div在页面加载后2秒内转换;我试图用jquery做任何建议？

＆＃13;

$(document).ready(function(){
  $('.affor').hide(function(){
    $(this).delay(function(){
      $(this).show();
    });
  });
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=".affor"> Hello </div>

＆＃13;

Answer 1

您必须阅读.delay()的手册。此外，您不应该在课程内部.。在CSS中，您使用.作为类。你需要使用这样的东西：

＆＃13;

$(document).ready(function() {
  $('.affor').hide(0, function() {
    $(this).delay(2000).fadeIn(1000);
  });
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="affor">Hello</div>

＆＃13;

由于display设置为flex，正确的淡入方式无法正常工作。

Answer 2

您可以使用jQuery实现此效果。

但是（也许更简单）你也可以单独使用CSS @keyframes实现它：

＆＃13;

.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;}
}

＆＃13;

<div class="affor">Hello</div>

＆＃13;

需要在页面加载后两秒钟显示div

2 个答案: