Question

我有以下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”值的动画。我有道理吗？

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

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

<div style="position:relative;">
  <div class="LeftColumn" style="float:left;"></div>
  <div class="MiddleColumn" style="position:absolute;left:200px;"></div>
</div>

现在在您的javascript中显示：

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

并隐藏：

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

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

jQuery向右/向左滑动

1 个答案: