Question

所以我正在制作侧边栏。

我让它工作得很完美，但我在两周内没有触及过代码，当我现在回到它时，它表现得很有趣。

让我来解释一下发生了什么。侧边栏侧面很窄，只有图标。大约55px宽。当您将鼠标悬停在该边栏上时，侧边栏会扩展为225px宽，并显示与图标一起显示的文本。整个身体移动超过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
});

什么会导致这种情况无法同时生成动画？

我已经尝试过队列：假，如你所见，但是什么也没做。有什么想法吗？

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

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

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应该在哪里。

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

1 个答案: