Question

我有一个只会影响Firefox的奇怪问题。在我的开发website中，我有这个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更简单，更清晰。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

jQuery animate在Firefox中进行div跳转

2 个答案: