如何使用jQuery淡入div？

我在css文件中定义了一个div，如下所示：

    #toolbar
    {
        position:relative;
        top: 0;
        height: 50px;
        background-color: #F4A83D;
        width: 100%;
        text-align: center;
        display: hidden;
    }

然后，在我的HTML文件中，我有：

 <div id="toolbar">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

测试程序工具栏


您正在访问：

最后，我在html页面的顶部有以下脚本，我认为在加载页面时，该脚本会在我的div中消失：

   <script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            $("#toolbar").fadeIn("slow");
        });
    </script>

$（文档）.ready（函数（）{
$（“#工具栏”）.fadeIn（“慢”）；
});

我做错了什么？它立刻显示出来，好像它根本没有消失。我在jquery脚本中是否没有正确访问div

---

根据一些答案，我将div改为：

<div id="toolbar" style="visibility: hidden">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

测试程序工具栏


您正在访问：

---

使用相同的脚本调用，现在我的div开始隐藏，并且从未显示。我还做错了什么

您必须先隐藏div

$('#toolbar').hide().fadeIn('slow');

或者类似于此，因此当页面仍在加载时，工具栏将不可见：

<div id="toolbar" style="visibility: hidden">...</div>

$('#toolbar')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;

。。。
$（“#工具栏”）
.css({
可见性：“可见”，
不透明度：0
})
.fadeIn（“慢”）
;

请参见：

hidden不是display属性的有效值。您应该使用display:none

这就是为什么你会立即看到它，它从来没有被隐藏，因为浏览器不知道如何处理显示：隐藏；声明

您可能想要可见性：隐藏；属性，因为这样工具栏将不可见但呈现，因此它将占用文档中的空间。这将确保你的整个页面在淡入时不会被推来推去

$("#toolbar").css("display","none"); 

$("#toolbar").css("display","block").fadeIn('slow'); 

或者你可以使用动画功能。

---

我注意到的一件事是您的脚本源代码

<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></

是无效的，应该是

Visibility: hidden;

隐藏元素的步骤

或

显示：无
用于隐藏元素

以及展示：

display: block;

以及检索元素的状态：

var state = $("#ex").css("display"); 

if(state == "none")
{
...
}
else
...

使用“可见性：隐藏”而不是“显示：无”可能更有益，因为它在不可见时不会更改布局。ust在您发表评论时添加了这一点。不过谢谢。有了“可见性：隐藏”，div从隐藏开始，从不显示。还有什么问题吗？
display: block;

var state = $("#ex").css("display"); 

if(state == "none")
{
...
}
else
...

$("button").click(function() { 
  $(".element")
  .css({ opacity:0, visibility:"visible" })
  .animate({ opacity:1 }, "slow");
});