jQueryを使用して要素と兄弟要素のサイズを動的に変更するにはどうすればよいですか？

Question

emmawatson.comまたはted.comを見ると、ホバー上でサイズ変更される複数のパネルまたはdivがあることがわかります。

emmawatson.comでは、実際には他のdivが上書きされているdivに基づいて動的にサイズ変更されます。

私は、特定の境界内のdivにclickを使用して同様の効果を作りたいと思います。

どうすればいいですか？次のように

擬似コードは次のとおりです。

$(div*containing"input").function() 
div*containing"input".resize(when input element is active) 
otherDivs.move(get out of the way so this div can expand) 
$(xButton).click(bring things back to their original size) 

は私の擬似コードの楽しみをしないでください。私はこれに新しいブランドが好きです。 ：P

http://jsfiddle.net/JVtyv/9/

Answer 1

あなたは間違いなくjQueryの同位体http://isotope.metafizzy.co/demos/relayout.htmlをご覧ください。このプラグインは、選択範囲内の要素のサイズを変更したり、他の多くの要素レイアウトソリューションをエレガントにシンプルにしたりすると、要素レイアウトを再計算します。

これは、必要な操作を正確に行う必要があります。

Answer 2

これを行うには、jQueryでhover()メソッドを使用できます。

ホバー方式は以下のように動作します。ホバー（上、下）; "上"と "下"のために実行したい機能を挿入し、設定します。

あなたはemmawatson.com上のようなdivの内側に画像のサイズを変更したいのであれば、あなたがホバーとCSS methosを使用して、次のような何かをするだろう：

$(function(){ 
$("div").hover(function(){ 
    $("div img").css({"height":"150%" , "width":"auto"}); //auto scales the width according to the image height 
    }, 
    function(){ 
     $("div img").css({"height":"auto" , "width":"auto"}); //auto resizes image back to default dimensions 
     }); 
}); 

ジャストクリップするoverflow:hidden;のようないくつかのCSSを使用しますdivの中のイメージとあなたは行くのが良いです。

また、jQuery documentationでお読みください。それは不思議です！