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。

Answer 2

在tympanus.net上发表了一篇描述其工作原理的文章： http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

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

方向感知悬停上的动画Div Overlay，使用jQuery＆amp; CSS3

2 个答案: