jQuery animate 在 Firefox 中实现 div 跳转答案

【问题标题】：jQuery animate makes a div jump in FirefoxjQuery animate 在 Firefox 中实现 div 跳转
【发布时间】：2016-04-05 20:06:30
【问题描述】：

我有一个只影响 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 中，只要我单击滑动切换，内容区域就会跳到底部并备份。

我一直在尝试调整数字，但这无济于事。任何帮助将不胜感激。谢谢。

【问题讨论】：

可能与 Firefox 的宽度动画问题有关。尝试使用最小宽度。你能举个 JSFiddle 的例子吗？
@Itamar - 更好的是，在我的帖子中有一个指向开发网站的直接链接 :)

标签： javascript jquery html css firefox

【解决方案1】：

我之前在 FF 中遇到过 setTimeout 的问题。在您的情况下，请尽量避免使用setTimeout，它可能会起作用。

您不必在动画结束后调用setTimeout 来调用某些内容。有一个内置的回调。你可以在延时之后写一个带逗号的回调函数。检查是否有帮助。即使它对你的问题没有帮助，像下面给出的那样做绝对比使用像 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";
}

【讨论】：

我已经尝试删除这 3 行 setTimeout，但不幸的是，这并没有帮助，您可以在我的开发网站上尝试使用我认为的 FF 开发人员工具。顺便说一句，关闭侧边栏时也会出现问题，那里没有setTimeout。
我刚刚在 Firefox 中查看了网页。它正在工作。它不会跳到底部并备份。
好的，我现在看到了。对不起。我以为侧边栏在上下跳跃。没注意内容。

【解决方案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>

【讨论】：