JQueryを使ってすべての方向でdivを展開します

Question

私はdivのグリッドを持ち、それぞれに内容があります。何らかのテキスト、画像、何らかの[x]ボタンがあります。これらのdivはすべて絶対的な位置に設定されています（それは不規則なグリッドですので、絶対に行くことにしました）。

私が今したいことは、マウスカーソルがそれらの上にあるときに展開して、グリッドから他のオーバーラップするdivの上に置くことです。私はここでこれを行うことができた：http://jsfiddle.net/CvhkM/2833/。問題は、最初の位置とディメンション（各divは独自の位置とディメンションを持ちます）に戻して何らかの理由で動作しないようにすることです（これはjQueryで初めてのことです）。ああ、追加してもよろしいですか、地域（矩形領域）の外側に広がらないように制限するにはどうすればよいですか？

Answer 1

上記のオーバーフローの問題は間違いなく助け、そしてあなたはCSSでそれを行うことができます。私は個人的にオーバーフローを行います：隠れているかオーバーフロー：自動です。オーバーフローしたコンテンツは、ボックスが上に乗るまで隠されたままです。

コードを動的にするためのコードを追加しました。好きなようにホバーアニメーションの数を自由に調整することができます。また、倍率も調整できますサイズ：元の寸法に合わせて：

var multiplying_factor = 1.5; 
$(function() { 
    $('.div').each(function() { 
     $(this).data('original_position', $(this).offset()); 
     $(this).data('original_width', $(this).width()); 
     $(this).data('original_height', $(this).height()); 

     $(this).hover(function() { 
      $(this).stop().animate({ 
       left : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor/4), 
       top : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor/4), 
       width : $(this).data('original_width') * multiplying_factor, 
       height : $(this).data('original_height') * multiplying_factor 
      }, 300); 
     },function() { 
      $(this).stop().animate({ 
       left : $(this).data('original_position').left, 
       top : $(this).data('original_position').top, 
       width : $(this).data('original_width'), 
       height : $(this).data('original_height') 
      }, 300); 
     }); 
    }); 

}); ​ 

Answer 2

オーバーフローの問題です。

$('.div').css('overflow','visible'); 

を追加してみてください。このJSFiddleを参照してください：

http://jsfiddle.net/CvhkM/2834/