使用jQuery加载页面后，如何淡入div？

Question

我正在尝试淡出此HTML的电影div

<div class="row">
  <div id=Movies class="col-md-4">
   <h2>Movies</h2>
  <p>Some text.</p>

 </div>
</div>

我正在使用这个jQuery代码

<script>
    $(function(){$("#Movies").show("slow");
                });
</script>

我也尝试过这个：

<script>         
          $(document).ready(function(){$("#Movies").fadeIn(3000);
                             });
</script>

但这是行不通的。 该页面加载时不会淡入。div就像其他所有元素一样加载。 这怎么了

Answer 1

添加此CSS使其隐藏，然后只有它会在页面加载时逐渐fadeIn

#Movies {
display:none;
}

Answer 2

为了工作 #movie必须被隐藏，然后按照jQuery函数的提示显示文档准备就绪的时间。

 $(document).ready(function() { $("#movies").fadeIn(3000); }); 

 #movies { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div id=movies class="col-md-4"> <h2>Movies</h2> <p>Some text.</p> </div> </div> 

Answer 3

首先，您必须隐藏电影div，然后淡入。另外，我看到您的ID“电影”在问题代码段中没有引号。 希望能帮助到你。

HTML

<div class="row">
  <div id="Movies" class="col-md-4" style="display:none">
   <h2>Movies</h2>
  <p>Some text.</p>
 </div>
</div>

使用Javascript

 $(document).ready(function(){
     $("#Movies").fadeIn(3000);
});