javascript - 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, etc 到 1 所以 10 无效

改成

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

Example