我需要帮助让JQuery函数幻灯片向下在我的代码中工作

I need help getting the JQuery Function slideDown to work in my code

本文关键字：我的 代码 工作 幻灯片 帮助 函数 JQuery      更新时间：2023-09-26

我的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;
}

尝试更换

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

带有

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

我认为你应该很好

如果div已经隐藏，代码将显示它，如果它不可见，则显示它。

您的else条件始终在执行，因此视频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/

为什么不使用$("#video").slideToggle();而不是if-else检查？并设置display:none属性初始

像一样使用单独的脚本标记

<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>
相关文章：