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>

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

Answer 1

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

将其更改为

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

Example

Answer 2

opacity的初始值为1，因此请确保动画为1。

以下是规范中关于opacity：http://www.w3.org/TR/css3-color/#transparency

的内容

试试这个：

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

这是一个jsbin来说明这一点：http://output.jsbin.com/lefilerube/2/

还要考虑fadeTo，因为根据jQuery的文档，当你想“调整匹配元素的不透明度”时应该使用它。

通过您的示例，这将转换为：

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

希望有所帮助。

Jquery将不透明度淡化为100％

2 个答案: