如何褪色一个div与jQuery的？

我定义为我的CSS文件中的以下一个div：如何褪色一个div与jQuery的？

#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开始时隐藏，并且一直没有出现。我还有什么做错了？

来源

2009-04-16 Mithrax

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

隐藏不是显示属性的有效值。你应该使用display：none;

这就是为什么你看到它的瞬间，它永远不会被隐藏，因为浏览器不知道该怎么办与显示：隐藏;宣言。

您propably希望visibility：hidden的;财产，虽然因为这样的工具栏将不可见，但渲染，所以它会占用它的文档空间。这将确保您的整个页面在您淡入时不会被推动。

来源

2009-04-16 06:41:00

使用“visibility：hidden”而不是“display：none”可能更有益，因为它不会在不可见时更改布局。 – nickf 2009-04-16 06:43:41

你必须先隐藏股利。

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

或类似这样的，所以当页面仍在加载工具栏将不可见：

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

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

来源

2009-04-16 06:40:45 nickf

随着 “visibility：hidden的” 股利开出隐藏的，从来没有显示。还有什么不对吗？ – Mithrax 2009-04-16 06:45:18

我更新了另一种方法 - 尝试一个。 – nickf 2009-04-16 07:25:31

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

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

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

来源

2009-04-16 12:31:29

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

<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;

隐藏元素

来源

2009-04-16 21:05:10 Fatal510

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

和显示：

display: block;

和检索元素的状态：

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

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

来源

2009-04-20 07:46:23

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

来源

2011-02-22 23:33:09

如何褪色一个div与jQuery的？

回答

相关问题