jQuery drawer with hover and click functionality

Question

I'm trying to achieve a drawer like effect using jQuery. My page consists of two overlapping divs where the top div has been moved slightly the side, revealing some of the bottom div.

When i hover on the bottom div i want the top div to shift slightly and when i click the bottom div i want the top div to slide across the page.

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

What I can't figure out is how to make it work the other way, that is, how do I apply transforms the top div while it's "open"?

Code for opening the drawer:

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