Question

我需要两个高度和高度的DIV层。宽度：每个100％，当我点击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");
});

有人能用比我更好的代码帮助我编写这类代码吗？

Answer 1

这是一个有效的例子：

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

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

jsFiddle

Answer 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");
}

使用jQuery滑动两个DIV

2 个答案: