jQuery向右/向左滑动

我有以下JS：

$(document).ready(function () { $(".LeftColumn").hide(); $(".SidebarToggle").toggle(function () { $(this).addClass("active"); $(this).text("Hide Sidebar"); $(this).attr("title", "Hide Sidebar"); //$(".LeftColumn").fadeIn("fast"); $(".LeftColumn").show("slide", { direction: "left" }, 100); return false; }, function () { $(this).removeClass("active"); $(this).text("Show Sidebar"); $(this).attr("title", "Show Sidebar"); //$(".LeftColumn").fadeOut("fast"); $(".LeftColumn").hide("slide", { direction: "left" }, 100); return false; }); 

这基本上显示和隐藏了一个带有LeftColumn类的div。 我遇到的问题是LeftColumn向左浮动，我有另一个名为Middle Column的div，它旁边漂浮着。 但是当我做动画时，LeftColumn做了一个很好的缓动幻灯片，但MiddleColumn将进出并填补空白。 如何让MiddleColumn相对于LeftColumn来回缓和（请记住MiddleColumn没有定义的宽度）。

谢谢

Answer 1

你知道左列的宽度，显示/隐藏的那个吗？ 如果是，您可以在中间列上设置position：absolute，然后在滑动左列的同时设置其“left”值的动画。 我有道理吗？

编辑：我认为问题是由于浮动：留在中间列。 如果左列不在那里，则中间列将显示在最左侧。 因此，当动画持续时，它会认为左列就像它在那里一样。 动画完成后，左列将被隐藏，元素将被重新对齐并获得捕捉效果。

所以，假设你的标记是这样的：

现在在您的javascript中显示：

 $(".LeftColumn").show("slide", { direction: "left" }, 100); $(".MiddleColumn").animate({'left': '200'}, 100); 

并隐藏：

 $(".LeftColumn").hide("slide", { direction: "left" }, 100); $(".MiddleColumn").animate({'left': '0'}, 100); 

因此，在为左列的隐藏设置动画时，您还可以设置中间列的位置。 （我很困惑为什么你的动画方向：隐藏和显示中的“左”。不应该显示动画方向：“正确”？）