Question

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

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

基于一些答案，我把我的div改为：

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

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

Answer 1

请参阅：http://www.w3schools.com/css/pr_class_display.asp

hidden不是display属性的有效值。你应该使用display：none;

这就是为什么你立即看到它，它从未被隐藏过，因为浏览器不知道如何处理显示：隐藏;声明。

你可能希望能见度：隐藏;属性虽然因为这样工具栏将是不可见但呈现的，所以它将占用文档中的空间。这将确保您淡入时不会推动整个页面。

Answer 2

你必须先隐藏div。

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

或者像这样，因此在页面仍在加载时工具栏将不可见：

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

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

Answer 3

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

Answer 4

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

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

或者您可以使用动画功能。 Animate in JQuery

Answer 5

我注意到的一件事是你的脚本来源。

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

应该是

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

也

display: hidden;

无效应

Visibility: hidden;

隐藏元素

Answer 6

或 display: none; 用于隐藏元素。

并显示：

display: block;

并检索元素的状态：

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

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

如何使用jQuery淡化div？

6 个答案: