Question

这是我做过的一些导航的脚本... 在firefox中完美运行但在函数的fadeInUpBig部分之后无效。我想知道为什么会出现这种情况？我还发布了脚本中未加载的两个类的css和html来帮助。

$('.fa-question-circle').parent().on('click', function () {
      $('.submenu-ctn').fadeTo(0, 0);
      $("#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("what.html #overview");
      $(".submenu-ctn").load("what.html .submenu-what");
      $('.nav-toggle').removeClass('active');
      $(this).addClass('active');  
      $('.submenu-ctn').fadeTo(3000, 1);
});

拼贴区域主页的CSS ....

.metro .tile-area-main {
  position: fixed;
  left: 290px;
  top: 150px;
  display: inline-block;
  padding: 8px;
  width: auto;
  color: #ffffff;
  cursor: pointer;
  z-index : 349;
  width: 720px;
  height: 400px;
  overflow: hidden;
  z-index : 3000;

}
.metro .tile-area-main p {
    margin: 0;
    padding: 0 2.4em 0.6em;
    font-size: 1.2em;
    line-height: 1.5;
    color : #fff;
    cursor: pointer;

}

和真正简单的html ......

<body class="metro">
<div class="tile-area-main"></div>

Answer 1

愚蠢的帖子和愚蠢的答案但是你去了...基本上我使用的是未正确配置的测试平台...最后我设法在我的机器上获取浏览器并测试它们...工作查找......（哎呀）

Answer 2

控制台没有错误？那很难说..也许是这样的？

$('.fa-question-circle').parent().on('click', function () {
      var submenuInCache = $('.submenu-ctn');
      //Cache objects if you use them often ... 

      submenuInCache.fadeTo(0, 0);
      $("#colorscreen").remove();
      $( '#menu' ).multilevelpushmenu( 'collapse' );
      $("body").append('<div id="colorscreen" class="animated"></div>');
      //$("#colorscreen").addClass("fadeInUpBig"); as connexo said, no sens to this here... 
      $('.fadeInUpBig').css('background-color', 'rgba(33,29,134, 0.2)');
      $(".tile-area-main").css({width: "720px"});
      $(".tile-area-main").load("what.html #overview");
      submenuInCache.load("what.html .submenu-what");
      $('.nav-toggle').removeClass('active');
      $(this).addClass('active');  
      submenuInCache.fadeTo(3000, 1);
});

Answer 3

由于＆＃34;没有工作＆＃34;我认为你的意思是＆＃34;没有按预期行事＆＃34;？

有一点需要指出的是，你可能错过的是jQuery淡入淡出事件是异步的。线程不会等待它们完成所以

$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();

有效地导致#colorscreen被立即删除。您应该对所有这些类型的异步效果使用回调：

$('.submenu-ctn').fadeTo(0, 0, function() {
    $("#colorscreen").remove();
    ...
}

这个脚本在IE和Chrome中不起作用是有原因的吗？

3 个答案: