如何褪色一個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的？

回答

相關問題