Div调整大小并重叠jquery

Question

我创建了一个包含4个div的容器。我需要在悬停时，div更改是大小并覆盖其他div。

这是一个演示http://jsbin.com/ecuzof/113/edit

问题：我希望底部div从底部到顶部而不是像现在一样从上到下增长。

有可能吗？ 谢谢 -G。

Answer 1

Working Example

您可以将bottom设置为0，然后div将从底部向上设置动画。另外，请注意我创建了两个事件 - 一个用于顶部d​​iv，另一个用于底部设置。

$(".riga .hoverific").hover(function() {
  $(this).stop().animate({
    width: "70%",
    height: "70%",
    backgroundColor: "lightBlue"
  }).css({'z-index':'3'});
}, function() {
  $(this).stop().animate({
    width: "50%",
    height: "50%",
    backgroundColor: "silver"
  }).css({'z-index':'1'});
});


$(".riga2 .hoverific").hover(function() {
  $(this).stop().animate({
    width: "70%",
    height: "70%",
    bottom: "0%",
    backgroundColor: "lightBlue"
  }).css({'z-index':'3'});
}, function() {
  $(this).stop().animate({
    width: "50%",
    height: "50%",
    backgroundColor: "silver"
  }).css({'z-index':'1'});
});