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

Question

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

但是，如何实现根据鼠标悬停在元素上的方向显示/动画叠加的叠加效果(请参阅上面 URL 中的投资组合元素，例如 DIV。

Answer 1

无需插件! 这是一个jsfiddle重做相同的效果。

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

这是 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;}

这是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。