Jquery 淡出不透明度至 100%

Question

我有这个脚本做了一些事情，但焦点是最后一行，因为它似乎没有使类不透明度达到 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>

content.html 页面将其 div 有选择地加载到上面的 div 中...

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

Answer 1

opacity属性值从0, 0.1,0.2,0.3, etc, etc 到 1，因此 10 无效

将其更改为

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

例子