jQuery animate在Firefox中进行div跳转

Question

我有一个只会影响Firefox的奇怪问题。 在我的开发网站中 ，我有这个jQuery代码：

  jQuery('body').on('click', '.sidebar-toggle', function(e){
    if (sidebarStatus == "OFF") {
      jQuery('.panel-sidebar').animate({
        marginLeft: "0px"
      }, 400);
      jQuery('.products-listing-contents').animate({
        marginLeft: "200px",
        width: '-=200px',
        'padding-right' : 0
      }, 400);

setTimeout(function(){
  jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
}, 420);

      sidebarStatus = "ON";
    }
    else {
      jQuery('.panel-sidebar').animate({
        marginLeft: "-184px"
      }, 400);
      jQuery('.products-listing-contents').animate({
        marginLeft: "15px",
        width: '100%',
        'padding-right' : "15px"
      }, 400);
      sidebarStatus = "OFF";
    }
    setCookie('sidebarStatus', sidebarStatus, 9999999);
  });

它基本上做的是左右侧推左侧边栏，同时调整左侧显示的内容宽度。 它在IE11和Chrome中运行良好，但在FF中，只要我点击幻灯片切换，内容区域会跳到底部并备份。

我一直试图调整数字，但这没有用。 任何帮助将不胜感激。 谢谢。

Answer 1

我以前在FF中遇到了setTimeout问题。 在你的情况下，尽量避免使用setTimeout ，它可能只是工作。

在动画结束后，您不必调用setTimeout来调用某些内容。 有一个内置的回调。 您可以在timedelay之后用逗号编写回调函数。 检查是否有帮助。 即使它对您的问题没有帮助，如下所示，这肯定比使用像setTimeout这样的异步更好。

像这样：

if (sidebarStatus == "OFF") {
  jQuery('.panel-sidebar').animate({
    marginLeft: "0px"
  }, 400);
  jQuery('.products-listing-contents').animate({
    marginLeft: "200px",
    width: '-=200px',
    'padding-right' : 0
  }, 400, function(){
      jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
  });

  sidebarStatus = "ON";
}

Answer 2

使用css转换。 比使用jQuery更容易和更清洁。

  $("#sidebar-container").on("click", function () { $(this).toggleClass('maximized-sidebar-container'); $("#content-container").toggleClass('minimized-content-container'); }); 

 #application-container { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: auto; } #sidebar-container { position: absolute; left: -160px; width: 170px; height:400px; background-color: #0F0; overflow: hidden; transition: 350ms left ease-out; z-index: 3; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); } .maximized-sidebar-container { left: 0px !important; } #content-container { position: absolute; right: 0px; left: 10px; height: 400px; background-color: #808080; border-width: 0px 0px 0px 1px; border-style: solid; border-color: #FFFFFF; overflow-x: hidden; overflow-y: auto; transition: 350ms left ease-out; z-index: 0; } .minimized-content-container { left: 170px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="application-container"> <div id="sidebar-container"></div> <div id="content-container">Content</div> </div>