使用 jQuery 滑动两个 DIV答案

【问题标题】：Sliding two DIVs with jQuery使用 jQuery 滑动两个 DIV
【发布时间】：2012-02-24 20:13:38
【问题描述】：

我需要两个高度和宽度分别为 100% 的 DIV 层，当我单击 DIV1 时，它必须 Slide from left to right 才能加载 DIV2，当单击 DIV2 时，它必须 Slide from right to left 才能加载 DIV1。我以以下方式进行编码，但有时 DIV 没有重叠，两个 DIV 幻灯片一个在顶部，另一个在底部。

$("#div2").width("0");
$("#div1").click(function () {
    $("#div1").animate({ width: 0 }, "slow");
    $("#div2").animate({ width: "100%" }, "slow");
});
$("#div2").click(function () {
    $("#div2").animate({ width: 0 }, "slow");
    $("#div1").animate({ width: "100%" }, "slow");
});

谁能帮助我用比我更好的代码编写这种类型的代码？

【问题讨论】：

标签： jquery html

【解决方案1】：

这是一个工作示例：

$(function() {
    var $right = $("#right").width(0);

    $("#slide").click(function() {
        $("#left").animate({ width: 0 });
        $right.animate({ width: "100%" });
    });
});

jsFiddle

【讨论】：

【解决方案2】：

$("#div2").width("0");

$("#div1").click(myToggle('div1', 'div2'));

$("#div2").click(myToggle('div2', 'div1'));

function myToggle(open, close) {
   $("#"+close).animate({ width: 0 }, "slow");
   $("#"+open).animate({ width: "100%" }, "slow");
}

【讨论】：