如何在页面加载时淡入一个div？

Question

我正在使用jQuery。我需要一个div在页面加载时淡入。

<div id=monster></div>

我该如何实现这个？

- mrpatg

Answer 1

它不能再简单了：

$(function(){  // $(document).ready shorthand
  $('#monster').fadeIn('slow');
});

如果您的div最初未隐藏，您可以在动画之前将其隐藏：

 $('#monster').hide().fadeIn('slow');

速度参数可以是'slow'、'normal'、'fast'或以毫秒为单位运行动画的时间。

- Christian C. Salvadó

Answer 2

jQuery/fadeIn

$(function() {
    $("#monster").fadeIn();
});

- Joe Chung

Answer 3

查看工作演示

$('#monster').hide().fadeIn('slow');

#monster{
  width: 200px;
  height: 100px;
  border: 1px solid #0095ff;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=monster>
  <pre>
    This is demo text.
    This is demo text.
    This is demo text.
    This is demo text.
  </pre>
</div>

- Rohit Tagadiya