Question

有人可以帮我创建内容滑动的简单概念吗？

我想要的东西可以在这个网站的（https://www.palatine.fr）底部看到 - 4个面板，它们在悬停时滑出，并在取消悬停后回到原始状态。我已经尝试了一些带有css块的小提琴，但它起起来非常复杂，而且我知道我最终还是需要jQuery，因为当鼠标取消面板时不会停止动画。

所以我要问的是，是否有人会如此善良并帮助我为内容创建这种类型动画的简单概念？

编辑：http://jsfiddle.net/z3gY7/就是我所做的，但它根本不是很多，而且根本不可能兼容。它基本上由div's和动画完成。

Answer 1

的 LIVE DEMO 的

HTML：

<div class="slideContent"> <p>Content here</p> <div class="slideIn"><p>Sub Content</p></div> </div>

CSS：

.slideContent, .slideIn{ height:300px; width:180px; } .slideContent{ position:relative; overflow:hidden; } .slideIn{ position:absolute; left:0; bottom:0px; display:none; }

JQ：

$('.slideContent').hover(function(){ $('.slideIn',this).stop().slideToggle(); });

_{重要说明：这个比你提供的网站更好：）}

Answer 2

<div class="wrap">
 <div class="wrap-inner">
  <div class="normal">
    Original text
  </div>
  <div class="hover">
   other text
  </div>
 </div>
</div>

.wrap
{
 display:block;
 width:300px;
 height: 300px;
 position:absolute;
 top:0px;
 overflow:hidden; 
}
.wrap-inner{
 position:absolute;
 height:600px;
 width:300px;
 top:0;
 -webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
 top:-300px;
}
.normal
{
 display:block;
 width:300px;
 height:300px;
 background-color:green;
}
.hover
{
 width:300px;
 height:300px;
 background-color:red;
}

我认为你很接近，只需要保留一个600px容器内部包装，这可以容纳两个300px项目一个低于其他。否则，当换行高度为300px时，不会渲染第二个项目。

http://jsfiddle.net/z3gY7/4/

Answer 3

http://jsfiddle.net/z3gY7/19/

HTML：

    <div class="wrap">
    <div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
    </div>
 <div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
    </div>    

</div>

CSS：

 .wrap
{

width:100%;
height: 300px;
position:absolute;

overflow:hidden; 
}
.box {
    width:25%;
    height:600px;
    float:left;
}

.normal {
    width:100%;
    height:300px;
    background-color:blue;
}
.hover {
    width:100%;
    height:300px;
    background-color:red;
}

并且，jquery：

$('.box').hover(
    function () {
        $(this).stop().animate({ 'margin-top':'-300px' }, 1000);
    },
    function () {
        $(this).stop().animate({ 'margin-top': '0px' }, 1000);
    }
);

您可以改变速度，以满足您的需求......

内容滑块概念

3 个答案: