jQuery的淡出透明度爲100％

我有此腳本，做了幾件事情，但重點是因爲它似乎並沒有使課堂不透明度爲100％到達最後一行....jQuery的淡出透明度爲100％

$('.fa-briefcase').parent().on('click', function() { 
     $("#colorscreen").remove(); 
     $('#menu').multilevelpushmenu('collapse'); 
     $("body").append('<div id="colorscreen" class="animated"></div>'); 
     $("#colorscreen").addClass("fadeInUpBig"); 
     $('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)'); 
     $(".tile-area-main").css({width: "720px"}).load("content.html #overview"); 
     $(".submenu-ctn").load("content.html .submenu-ctn"); 
     $('.nav-toggle').removeClass('active'); 
     $(this).addClass('active'); 
     $(".submenu-ctn").animate({ opacity: 10 }, 2000); 
});

類的CSS是這樣的....

.metro .submenu-ctn { 
    position: fixed; 
    left: 3px; 
    top: 150px; 
    height:400px; 
    width:263px; 
    float:left; 
    cursor: pointer; 
    overflow: hidden; 
    z-index : 999; 
    opacity:0; 

}

沒有人知道爲什麼類.submenu-CTN沒有在2秒內以動畫100％的不透明度？

編輯...

由於問題仍然引起我想後正在這裏用來幫助頁面（收費）的HTML問題...

...來回index.html頁面（這裏的東西是越來越加載）

<!-- INITIALISE THE SPACE FOR CONTENT -->   
<div class="tile-area"> 
<!--INITIALISE THE DIVS FOR CONTENT TO BE LOADED INCLUDING SUBMENU OPTIONS --> 
<div class="submenu-ctn"></div> 
<div class="tile-area-main"></div>

是有它的div選擇性加載到上面的div的content.html網頁...

<div class="submenu-ctn"> 

    <header class='masthead'> 
    <div class='brand-container'> 
    <a href='#'> 
     <span class='brand-initials'>Who Are Musability?</span> 
     <span><i class="fa fa-briefcase brand-initials-icon"></i></span> 
    </a> 
    </div> 
    <nav> 
    <div class='nav-container'> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>Mission and Values</span> 
     </a> 
     </div> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>Ethos</span> 
     </a> 
     </div> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>Music</span> 
     </a> 
     </div> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>Expression</span> 
     </a> 
     </div> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>People</span> 
     </a> 
     </div> 
     <div> 
     <a class='slide' href='#'> 
      <span class='element'>Potential</span> 
     </a> 
     </div> 
    </div> 
    </nav> 
</header> 
</div>

來源

2015-05-29 havingagoatit

它根本不改變它，或者立即做它？你也有'load（「content.html .submenu-ctn」）;'你是否試圖在content.html中加載並意外地放入css類？ –

可能的重複：（http://stackoverflow.com/questions/3390361/jquery-opacity-animation） – NightOwlPrgmr

根本不會改變它 – havingagoatit

opacity屬性值從0, 0.1,0.2,0.3, etc, etc爲1，10的無效

改變它

$(".submenu-ctn").animate({ opacity: 1 }, 2000);

Example

來源

2015-05-29 17:58:55 Misters

雖然不透明度不會達到10的值，但它仍然可以使用。動畫將發生得比使用1 –

都不工作，非常奇怪 – havingagoatit

你認爲它與從腳本的第7行另一個html文件加載它有什麼關係嗎？ – havingagoatit

opacity的初始值是1，所以一定要確保動畫到1。

下面是規範說，關於opacity：http://www.w3.org/TR/css3-color/#transparency

試試這個：

下面就來說明這一個jsbin：http://output.jsbin.com/lefilerube/2/

也可以考慮，因爲fadeTo，根據jQuery的文檔，當你想「調整匹配元素的不透明度」時應該使用它。

你的榜樣，這將轉化爲：

$('.submenu-ctn').fadeTo(2000, 1);

希望有所幫助。

來源

2015-05-29 18:11:17 mixn

它沒有工作...我開始認爲它通過在這兩個html頁面上使用相同的類名來解迷，哪些類去透明 – havingagoatit

HAHAHAH ---我們都是白癡，......被加載到頁面上的類中的類是THE SAME名稱......因此它變得困惑......對問題進行排序......無論如何，每個人都可以獲得投票 - – havingagoatit

jQuery的淡出透明度爲100％

回答

相關問題