我需要幫助使JQuery Function slideDown在我的代碼中工作

Question

我的html代碼中包含腳本。 由於無法在開頭顯示視頻div，因此無法顯示。 有什么想法為什么它沒有滑下來並顯示出來？ 這是html代碼和java腳本代碼：

<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function () 
{ 
      if ($("#video").is(":hidden")) {
      $("#video").slideDown("slow");
      } 
     else {
         $("#video").hide();
         }
 });

 </script> 
 </head>
 <body>
 <div id ="content">
 <div id="header"> 
 <h1>Software Picture</h1>
 </div>
 <span id="menu">
 <ul>
 <li>Main Tab</li>
 <li>Video Tab</li>
 <li>Third Tab</li>
 <li>Fourth Tab</li>
 </ul>
 </span>
 <div id="video"></div>
 </div>
 <div id="footer">

 </div>
 </body>
 </html>

這是CSS：

 @charset "utf-8";
 /* CSS Document */

 body
 {
     background-color:#333;
 }
 #content
 {
     width:800px;   
     border:solid 1px #FFFFFF;
     margin:auto;
 }
 #header
 {
     float:left;
     margin:0px;
     width:800px;
     height:100px;  
     text-align:center;
     background-color:#FFF;
 }
 #menu
 {
 float:left;
width:800px;
height:50px;
width:800px;
 }
 #menu ul
 {
padding:0px;
list-style-type:none;
 } 
 #menu li
 {  
    float:left;
  padding:5px 30px;
   font-size:20px;
   color:#FFFFFF;
   border-right:solid 2px #FFF;
 }
 #video
{
   display:none;
   float:left;
   width:800px;
   height:500px;
   background-color:#000000;    
} 
#footer
{
   width:800px; 
   margin:auto;
}

Answer 1

嘗試更換

<script src="http://code.jquery.com/jquery-latest.js">

與

<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>

我認為你應該沒事

Answer 2

您的代碼將顯示div（如果已被隱藏）並顯示（如果不可見）。

您的else條件始終會被執行，因此video div將始終被隱藏。

更改$("#video").hide(); 到$("#video").fadeOut("slow"); 那么當dom完成加載后，您會看到它正在消失。

如果要顯示vide div，請首先隱藏div。 這樣就可以顯示

<div id="video" style="display:none;">
     <h3>Video div content </h3>
    </div>
 </div>

jsfiddle示例： http : //jsfiddle.net/uzARd/4/

Answer 3

您為什么不只使用$("#video").slideToggle(); 而不是如果其他檢查？ 並首先設置display：none屬性

Answer 4

對兩個都使用單獨的腳本標簽

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function () 
{ 
      if ($("#video").is(":hidden")) {
      $("#video").slideDown('slow');
      } 
     else {
         $("#video").hide();
         }
 });

</script>

我需要幫助使JQuery Function slideDown在我的代碼中工作

問題描述

4 個解決方案

解決方案1
1 已采納 2012-03-21 03:28:00

解決方案2
0 2012-03-21 03:14:26

解決方案3
0 2012-03-21 03:26:11

解決方案4
0 2012-03-21 05:10:37

我需要幫助使JQuery Function slideDown在我的代碼中工作

問題描述

4 個解決方案

解決方案1 1 已采納 2012-03-21 03:28:00

解決方案2 0 2012-03-21 03:14:26

解決方案3 0 2012-03-21 03:26:11

解決方案4 0 2012-03-21 05:10:37

解決方案1
1 已采納 2012-03-21 03:28:00

解決方案2
0 2012-03-21 03:14:26

解決方案3
0 2012-03-21 03:26:11

解決方案4
0 2012-03-21 05:10:37