Jquery动画没有同时执行-已经尝试了所有方法

所以我在做一个侧边栏

我让它工作得很好，但我已经有两个星期没有接触过代码了，现在我回到它的时候，它的行为很有趣

让我解释一下发生了什么。侧边栏的侧面很窄，仅为图标。大约55像素宽。当您将鼠标悬停在上面时，侧边栏将扩展到225px宽，显示与图标一起显示的文本。整个身体在225px上移动，因此侧边栏看起来像是在推身体

正如我所说，它在两周前工作得很好，我还没有触及代码

现在，当我将鼠标悬停在侧边栏上时，它首先移动身体，然后展开侧边栏。它过去常常在同一时间做，看起来真的很酷

以下是我的JQuery代码：

//Hover sidebar, it appears
//Second function called when user leaves hover
$("#sidebar").hover(function() {
    $( "#sidebar" ).stop().animate({width: "225px"},{duration: 200, queue: false}); // Expand sidebar
    $( "#body-row" ).stop().animate({left: "225px"},{duration: 200, queue: false}); // Push body right
}, function() {
    $( "#sidebar" ).stop().animate({width: "55px"},{queue: false, duration: 200}); // Shrink sidebar back
    $( "#body-row" ).stop().animate({left: "55px"},{queue: false, duration: 200}); // move body back left
    $(".hidden-settings").slideUp(); //Slide up settings if they're visible
});

是什么原因导致它不能同时设置动画

我试过排队：如你所见，这是错误的，但那没有任何作用。有什么想法吗

这可能很难解释，所以如果你想要一个实时站点，我可以把一些东西推到我个人站点上的另一个目录

---

如果queue:false不起任何作用，那么如何使两个JQuery动画同时运行。在不需要的地方停止使用JS动画。在

悬停

事件中，只需向

主体

添加一个类，如

扩展

，或另一个共享父元素。然后编写CSS，如：

#sidebar {
  width:55px;
  transition:width 200ms;
}
#body-row {
  left:55px;
  transition:left 200ms;
}
.expanded #sidebar {
  width:225px;
}
.expanded #body-row {
  left:55px;
}

---

浏览器现在将确保它们同步，并且您删除了许多不需要的JS。将呈现/布局问题留给CSS处理。

我们不需要现场站点。仅仅是一个复制这个想法的工具就足够了。我很遗憾发布了这个。老实说，我甚至从来没有想到CSS会用于这样的事情。非常感谢你！简单多了。