Question

我想在文档加载后5秒钟出现一个弹出窗口。下面的解决方案似乎不起作用，我得到零控制台错误。 fiddle here

<!doctype html>
<html>

<head>
    <title>

    </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <style type="text/css">
      div{
        width:600px;
        height: 250px;
        border:2px solid black;
      }

    </style>  
    <script type="text/javascript">
     $(document).ready(function() {
        $('#popup').delay(5000).fadeIn(1);
     });

    </script>
</head>

<body>
  <div id="popup">
    yada yada
  </div>
</body>

</html>

Answer 1

这是因为#popup已经显示，您正在尝试fadeIn()，先隐藏它，然后在延迟5秒后尝试fadeIn()。

Fiddle

$(document).ready(function () {
    $('#popup').hide();
    $('#popup').delay(5000).fadeIn('slow');
});

Answer 2

您想要设置css属性display:none

</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
  div{
    width:600px;
    height: 250px;
    border:2px solid black;
    display:none;
  }

</style>  
<script type="text/javascript">
 $(document).ready(function() {
    $('#popup').delay(5000).fadeIn();
 });

</script>

亚达亚达

Answer 3

你走了。

当元素已经可见时，它不能具有淡入淡出效果。意味着首先需要隐藏元素，然后将其淡入。

$('#popup').hide().delay(5000).fadeIn(1);

jQuery delay（）/ fadeIn（）不起作用。控制台很好

3 个答案:

Fiddle