jquery - HTML 元素的定位和滑动

Question

我有一个 div，它包含一个 div，它包含另外两个 div:

<div class="container">
    <div class="overlay">
        <div class="title">Some title</div>
        <div class="description">Some description</div>
    </div>
</div>

我的 CSS:

div.container {
    width: 220px;
    height: 160px;
    display: inline-block;
    position: relative;
}

div.container div.overlay {
    margin: 0;
    position: absolute;
    bottom: 0px;
    width: 220px;
    padding: 0;
}

这与其他一些不相关的 CSS 一起构成了第二张图片中显示的内容。现在我需要做一些其他的 CSS 来让它默认像第一张图片。当您将鼠标移到 .container 上时，.description 应该会滑入，就像第二张图片一样:

我不知道如何定位所有内容并让描述滑入。你可以吗？

这个问题只是关于定位和滑动描述所需的 jQuery - 颜色和其他布局不是问题。我正在寻找与所有主流浏览器兼容的解决方案。

编辑:

忘记提及我不知道 .title 或 .description 的高度 - 高度设置为 auto 因为依赖在里面的文字上。

Answer 1

这可以用纯 css 3 来完成。

由于无法将高度从 0 转换为 auto，因此使用 max-height 代替:

.description  {
    max-height: 0;
    transition: 2s;
    overflow:hidden;
}

div.container div.overlay:hover .description {
  max-height: 160px;
}

纯 css 解决方案:http://jsfiddle.net/DkAKt/1/

即使您不知道描述的高度，此解决方案也适用。

CSS 3 转换需要 Internet Explorer 10+:http://caniuse.com/#search=transitions .旧版本仍然可以工作，但是没有动画。

---

如果你不能在 IE 8-9 中没有动画，你必须使用 javascript:

jQuery(function($){
  $(".container").on('mouseenter', function(){
    $(".description", this).stop(1,1).slideDown();  
  }).on('mouseleave', function(){
    $(".description", this).stop(1,1).slideUp();  
  })
  .find('.description').slideUp(0);
});

纯 jQuery 解决方案:http://jsfiddle.net/DkAKt/2/