3个div，主div作为图像，1个覆盖标题-顶部，另一个覆盖描述底部JQuery

Question

我有一个初始阶段必须是什么的示例图像：

如您所见，我将 div 内的主图像作为背景：宽度和高度 100%

标题 div - 顶部图像 div 的叠加层

还有描述 div - 底部图像 div 的另一个覆盖层

我正在寻找的是：一旦我将鼠标悬停在 iamge 的任何部分上，标题 div 就会向上滑出视图，而描述 div 会向下滑出视图。

有没有人遇到过这种 jQuery 结构的解决方案？

提前致谢。

Answer 1

我为你做了一个小 jsfiddle。

http://jsfiddle.net/A2E2n/

jQuery 代码是：

$(document).ready(function(){

    $("#img").hover(
      function () {
      $("#title").animate({"top":"-50px"},500);
      $("#desc").animate({"bottom":"-50px"},500);
  },
  function () {
      $("#title").animate({"top":"0px"},500);
      $("#desc").animate({"bottom":"0px"},500);
  }
  );

});