方向感知悬停上的动画Div覆盖，带有jQuery&；CSS3

只是想开发一个类似的公文包页面

---

但是，如何实现这种覆盖效果（请参见上面URL中的公文包项目），它是根据鼠标悬停元素（例如DIV）的方向显示/动画覆盖的。

不需要插件这里有一个重做相同效果的方法。

<div id="BigDiv">

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

</div>​

下面是javascript：

    $(document).ready(function () {
        PageHandler();
    });

    function PageHandler() {

    $('#BigDiv').on({

        mouseenter: function() {
            $(this).parent().find('.MyOverlay').css({
                opacity: '0.5',
                width: '0px'
            }).stop().animate({
                width: '50px'
            }, 500);
        },
    }, '.MyContent');

    $('#BigDiv').on({

        mouseleave: function() {
            $(this).parent().find('.MyOverlay').each(function() {
                $(this).stop().animate({
                    opacity: '0'
                }, 300, function() {
                    $(this).css('width', '0px');
                });} 
            )}
    }, '.MyWrapper');
}

---

我把不透明度设置为0.5而不是0.95，这样你可以更好地看到下面的5；如果你换一张照片，它会看起来更好。您还可以调整动画的持续时间。但总的来说，效果是一样的；你只需要让它与你的设计一起工作没有插件，只有jquery。

tympanus.net上发布了一篇文章，描述了它的工作原理：

---

这是一个简单的插件，你可以使用，你所要做的就是正确设置你的css。它基本上会检查鼠标在进入和离开悬停元素时的偏移量，根据该偏移量，它将决定从哪一侧设置悬停动画

在css不透明度设置为95%和jquery.animate的情况下，移动div的确切逻辑是使用jquery实现此方向感知悬停，然后相应地为使用css3制作的覆盖设置动画。这就是我所知道的一切——我现在已经筋疲力尽了。没有为这个OneHanks@frenchie找到任何通用的解决方案或现成的jQuery插件，但是如何在jQuery中检测鼠标的方向并相应地在该方向触发div的动画……这就是困惑所在。你试过JSFIDLE吗？啊，是的，我错过了。我会离开几天，但这样做的方法是a）检测mousemove并使用它来确定光标移动的方向，然后b）根据之前确定的方向将一个css宽度或高度设置为0，另一个设置为容器的宽度或高度，以及c）将0值设置为其全宽/高。你能分享吗你的代码不需要CSS3吗？该链接不再处于活动状态。谢谢。我已经从这个答案中删除了一个死链接。如果您有一段代码可以直接添加到问题Tosh中，请添加该代码，以避免进一步断开链接。谢谢

    $(document).ready(function () {
        PageHandler();
    });

    function PageHandler() {

    $('#BigDiv').on({

        mouseenter: function() {
            $(this).parent().find('.MyOverlay').css({
                opacity: '0.5',
                width: '0px'
            }).stop().animate({
                width: '50px'
            }, 500);
        },
    }, '.MyContent');

    $('#BigDiv').on({

        mouseleave: function() {
            $(this).parent().find('.MyOverlay').each(function() {
                $(this).stop().animate({
                    opacity: '0'
                }, 300, function() {
                    $(this).css('width', '0px');
                });} 
            )}
    }, '.MyWrapper');
}