Javascript jqueryanimate在Firefox中进行div跳转

我有一个奇怪的问题，只影响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中，只要我单击幻灯片切换，内容区域就会跳到底部并备份

---

我一直在尝试调整数字，但那没有帮助。任何帮助都将不胜感激。谢谢。

我以前在FF中遇到过设置超时的问题。在您的情况下，尽量避免使用

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

---

我以前在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";
}

---

使用css转换。比使用jQuery更简单、更干净

$（“#边栏容器”）。在（“单击”，函数（）{
$（this.toggleClass（'maximized-sidebar-container'）；
$（“#内容容器”）.toggleClass（'minimized-content-container'）；
});
#应用程序容器{
位置：绝对位置；
顶部：0px；
右：0px；
底部：0px；
左：0px；
溢出：自动；
}
#边栏容器{
位置：绝对位置；
左：-160px；
宽度：170px；
高度：400px；
背景色：#0F0；
溢出：隐藏；
过渡时间：不超过350毫秒；
z指数：3；
盒影：0px 1px 2px rgba（0,0,0,0.3）；
}
.最大化边栏容器{
左：0px！重要；
}
#内容容器{
位置：绝对位置；
右：0px；
左：10px；
高度：400px；
背景色：#808080；
边框宽度：0px 0px 0px 1px；
边框样式：实心；
边框颜色：#FFFFFF；
溢出x：隐藏；
溢出y：自动；
过渡时间：不超过350毫秒；
z指数：0；
}
.最小化的内容容器{
左：170px！重要；
}

内容
使用css转换。比使用jQuery更简单、更干净


$（“#边栏容器”）。在（“单击”，函数（）{
$（this.toggleClass（'maximized-sidebar-container'）；
$（“#内容容器”）.toggleClass（'minimized-content-container'）；
});
#应用程序容器{
位置：绝对位置；
顶部：0px；
右：0px；
底部：0px；
左：0px；
溢出：自动；
}
#边栏容器{
位置：绝对位置；
左：-160px；
宽度：170px；
高度：400px；
背景色：#0F0；
溢出：隐藏；
过渡时间：不超过350毫秒；
z指数：3；
盒影：0px 1px 2px rgba（0,0,0,0.3）；
}
.最大化边栏容器{
左：0px！重要；
}
#内容容器{
位置：绝对位置；
右：0px；
左：10px；
高度：400px；
背景色：#808080；
边框宽度：0px 0px 0px 1px；
边框样式：实心；
边框颜色：#FFFFFF；
溢出x：隐藏；
溢出y：自动；
过渡时间：不超过350毫秒；
z指数：0；
}
.最小化的内容容器{
左：170px！重要；
}

内容
可能与Firefox的宽度动画问题有关。尝试使用最小宽度。你能举一个JSFIDLE的例子吗？@Itamar-更好的是，在我的帖子中有一个到开发人员网站的直接链接：）可能与Firefox的宽度动画问题有关。尝试使用最小宽度。你能给JSFIDLE举个例子吗？@Itamar-更好的是，在我的帖子中有一个到开发人员网站的直接链接：）我已经尝试删除了这3行
setTimeout
，但这没有帮助，不幸的是，你可以在我的开发人员网站上尝试，使用我认为的FF开发人员工具。顺便说一下，关闭侧边栏时也会出现问题，那里没有设置超时。我刚刚在Firefox中查看了网页。它起作用了。它不是跳到底部然后再向上。好的，我现在看到了。很抱歉我以为边栏在上下跳跃。没有注意到内容。我已经尝试删除了这3行
setTimeout
，但是没有帮助。不幸的是，你可以在我的开发网站上尝试，使用我认为的FF开发者工具。顺便说一下，关闭侧边栏时也会出现问题，那里没有设置超时。我刚刚在Firefox中查看了网页。它起作用了。它不是跳到底部然后再向上。好的，我现在看到了。很抱歉我以为边栏在上下跳跃。没有注意到内容。