Jquery 动画没有同时执行 - 已经尝试了一切

Question

所以我正在制作侧边栏。

我让它运行得很好，但我已经有大约两周没有碰过代码了，当我现在回来看它时，它表现得很有趣。

那么让我解释一下发生了什么。侧边栏很窄，只有图标。大约 55px 宽。当你将鼠标悬停在上面时，侧边栏会扩展到 225 像素宽，显示文本和图标。整个主体移动了超过 225 像素，所以看起来边栏展开将主体推过去。

正如我所说，它在两周前运行良好，而且我还没有触及代码。

现在，当我将鼠标悬停在侧边栏上时，它会先移动正文，然后展开侧边栏。它过去常常同时进行，看起来真的很酷。

这是我的 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，但它没有任何作用。有什么想法吗？

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

那么，如果 queue:false 没有做任何事情，我如何让两个 JQuery 动画同时运行。

Answer 1

停止在不需要的地方使用 JS 动画。在 hover 事件中，只需将 expanded 类添加到 body 或另一个共享父元素。然后像这样写 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。