jquery - Divのサイズ変更とjqueryのオーバーレイ

Question

4 つの div を持つコンテナーを作成しました。ホバー時にdivの変更がサイズであり、他のdivをオーバーレイする必要があります。

ここでデモhttp://jsbin.com/ecuzof/113/edit

問題: 今のように上から下ではなく、下の div を下から上に成長させたい。

出来ますか？ありがとうございます。

Answer 1

実施例

to を設定bottomする0と、div が下から上にアニメーション化されます。また、2 つのイベントを作成したことに注意してください。1 つは上部の div 用で、もう 1 つは下部のセット用です。

$(".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'});
});