JQuery hover and click box

Question

I am trying to achieve a box effect using jQuery. My page consists of two overlapping divs, where the top div is slightly moved to the side, showing part of the bottom div.

When I am in the bottom div, I want the top div to move slightly, and when I click on the bottom div, I want the top div to move around the page.

Demo : http://jsfiddle.net/hVts8/

I can’t understand how to make it work in a different way, that is, how can I apply the conversion of the top div when it is “opened”?

Code for opening the box:

$('#bottom-page').on({
    mouseenter: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(15%,0,0)",
                "transform": "translate3d(15%,0,0)"
        });
    },
    mouseleave: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)"
        });
    },
    click: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(90%,0,0)",
                "transform": "translate3d(90%,0,0)"
        });
        $(this).off('mouseenter mouseleave');
    }
});

Answer 1

How about something like that? ( Fiddle )

enableDrawerHover();

$('#bottom-page').on({
    click: function () {
        if ($(this).hasClass('open')) {
            $("#top-page").css({
                "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)",
            });
            $(this).removeClass('open');
            enableDrawerHover();
        }
        else {
            $("#top-page").css({
                "-webkit-transform": "translate3d(90%,0,0)",
                "transform": "translate3d(90%,0,0)",
            });
            $(this).addClass('open');
            $(this).off('mouseenter mouseleave');
        }
    }
});

function enableDrawerHover() {
    $('#bottom-page').on({
        mouseenter: function () {
            $("#top-page").css({
                "-webkit-transform": "translate3d(15%,0,0)",
                "transform": "translate3d(15%,0,0)"
            });
        },
        mouseleave: function () {
            $("#top-page").css({
                "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)"
            });
        }
    });
}