Question

I need two DIV layers with height & width:100% each and when I click on DIV1 it has to Slide from left to right to load DIV2 and when clicked on DIV2 it has to Slide from right to left to load DIV1. I coded in the following manner which is working but sometimes DIVs are not being overlapped and two DIV slides one on top and other on bottom.

$("#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");
});

Can anybody help me in coding something of this kind with better code than mine?

Answer 1

Here’s a working example:

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

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

jsFiddle