jquery - 方向感知悬停上的动画 Div 叠加，使用 jQuery 和 CSS3

Question

只是想开发一个类似于http://www.lippincott.com/work/的投资组合页面。

但是，如何实现这种叠加效果（请参阅上面 URL 中的组合项目），它根据鼠标悬停在元素上的方向显示/动画叠加，比如 DIV。

Answer 1

There's no need for a plug-in! Here's a jsfiddle that redoes the same effect.

<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>​

Here's the CSS:

.MyWrapper{
    margin:3px 3px;
    float:left;
    width:50px;
    height:50px;
    border:2px solid green;}

.MyContent{
    width:50px;
    height:50px;
    position:relative;}

.MyOverlay{
    opacity:0;   
    width:0px;
    height:50px;
    position:relative;
    top:-50px;
    left:0px;
    background:blue;}

Here's the 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');
}

I left the opacity at 0.5 instead of 0.95 so that you can see the 5 underneath better; it'll look better when you'll put a picture instead. You can also ply with the durations of the animations. But overall, it's the same effect; you just need to make it work with your design. No plugin, just jquery.

Answer 2

tympanus.net 上发表了一篇文章，描述了它是如何工作的： http ://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

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