使用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);
});