javascript - 内容 slider 概念

Question

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

我想要的可以在这个网站的 ( https://www.palatine.fr ) 底部看到 - 4 个面板，悬停时滑出，悬停后恢复到原来的状态。我已经用 css block 尝试了一些 fiddle ，但它变得非常复杂，而且我知道我最终还是需要 jQuery 来处理诸如鼠标悬停在面板上时不停止动画之类的事情。

所以我想问的是，是否有人愿意帮助我为此类内容创建一个简单的动画概念？

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

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();
});

_{重要说明:这个比您提供的网站上的效果更好:)}