javascript - 具有悬停和单击功能的 jQuery 抽屉

Question

我正在尝试使用 jQuery 实现类似抽屉的效果。我的页面由两个重叠的 div 组成，其中顶部的 div 已稍微向一侧移动，露出一些底部的 div。

当我将鼠标悬停在底部的 div 上时，我希望顶部的 div 稍微移动，而当我单击底部的 div 时，我希望顶部的 div 在页面上滑动。

演示:http://jsfiddle.net/hVts8/

我想不通的是如何让它以另一种方式工作，也就是说，我如何在它“打开”时应用转换顶部 div？

打开抽屉的代码:

$('#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

这样的事情怎么样？ ( 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)"
            });
        }
    });
}