Question

我试图在我的网站上创建一个效果，一旦你将鼠标悬停在一个方框上，该div会向上滑动以显示包含更多详细信息的另一个div。这类似于以下网站如何做到这一点......

http://www.facebook.com/pages/create.php
http://plus.google.com/pages/create

Facebook - 点击一个类别 Google+ - 悬停在某个类别上（我希望我的网站如何运作）

如果有人能指出我正确的方向，那将是惊人的，谢谢：）

Answer 1

你可以使用jQuery的$.animate()和一些CSS来实现这样的效果：

<强> CSS

.container {
    position: relative;
    float: left;
    margin: 10px;
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.inner {
    position: absolute;   
    top: 0;
}

.itemTop {
    width: 250px;
    height: 250px;
    background: #ccc;   
}

.itemBottom {
    width: 250px;
    height: 250px;
    background: #fff000;
}

<强> HTML

<div class="container">
    <div class="inner">
        <div class="itemTop">Top</div>
        <div class="itemBottom">Bottom</div>
    </div>
</div>

<div class="container">
    <div class="inner">
        <div class="itemTop">Top</div>
        <div class="itemBottom">Bottom</div>
    </div>
</div>

的JavaScript

/**    
 * $.on() is jQuery 1.7+
 * use $('.container').click(function(e){... for < 1.7
 */
$(document).on('click', '.container', function(e){
    e.preventDefault(); // Prevent Default Action
    $('.inner').animate({top:0}, 'linear'); // Reset Other Containers
    $('.inner', this).animate({top:-250}, 'linear'); // Animate Clicked Container
});

我希望这有帮助！

Answer 2

您可以使用CSS将两个元素放在一起，然后使用JavaScript为顶部元素设置动画。实际上有很多不同的方法，所以一切都是为了找到你想要的效果。

这是一个用于在另一个元素之上滑动一个元素的jsfiddle：http://jsfiddle.net/PdZKP/

JS

$('#front').on('mouseenter', function () {//where front is the element on top
    $(this).slideUp();
}).on('mouseleave', function () {
    $(this).slideDown();
});

CSS

#back {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100px;
    height     : 100px;
    background : #000;
    z-index    : 1;
}
#front{
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100px;
    height     : 100px;
    background : #abc;
    z-index    : 2;
}

HTML

<div id="back"></div>
<div id="front"></div>

我更新了jsfiddle以获得略有不同的动画风格：http://jsfiddle.net/PdZKP/1/（我认为这就是你要找的东西）

Answer 3

http://www.lotusmarketing.ca/js/jsprite/

这可以帮到你，例如1b。

Div滑动并在其位置显示另一个div

3 个答案: