jQueryでdiv内のフォームの最小化ビューを実装する方法は？

Question

デフォルトでは、div内の最小化されたビュー、 が表示されます。ユーザーがdivをクリックすると、編集するフォームのポップアップが表示されます。

これを実装する方法は？ jQueryでこれを実現する準備ができたプラグインがありますか？

Answer 1

これを作成して、オーバーフローを隠して小さくしてください。

クリックして大きくするとアニメーションが大きくなります。

編集：

oh right。だからあなたはそれをすべて小さくしたいですか？

うーん、私は「簡単な」方法があるとは思わない。あなたがそれを行うことができるのは、幅と高さ（およびテキストサイズ）の％をフォーム上のすべての要素を使って検索します。

私の頭の上から理論だけで動作することができます。

例：

$("#container").click(function() { 
     $(this).siblings().css({width:25%, height:25%, font-size:25%}); 
}) 

等...

Answer 2

あなただけの大きいスタイルと小さいものを指定して、それらの間で前後に反転させる必要があります。

jQuery('#my-div').click(function(){ 
    jQuery(this).removeClass('smaller').addClass('bigger'); 
}); 
jQuery('#my-div').blur(function(){ 
    jQuery(this).removeClass('bigger').addClass('smaller'); 
}); 

またはそれに似たもの。