Jquery / Jquery工具获得更小的效果

我想用JQuery Tools（或者只是用JQuery）和HTML5开发一个屏幕。 屏幕上会有一个主面板，上面会有圆角方形按钮。 当用户单击按钮时，此面板将变小并将放置在左侧，将在右侧显示某些内容。

我的意思是：

大正方形内的正方形象征着按钮。 当用户单击1处的按钮时，面板将变小并向左移动，如同2。

我可以使用它： JQuery Tools

Answer 1

看起来我终究找到了一些时间 。 似乎在Chrome 15中适合我，所以也可能在其他基于webkit的浏览器中工作。 这只是一个起点，因此跨浏览器代码需要一些关注。

编辑： 更新了使用shrinkTo jQuery插件的 demo

HTML

Shrinkify me 
 
           

CSS

 #big { width:240px; height:240px; border:4px solid black; padding:5px; text-align:center; display:table-cell; vertical-align:middle; position:relative; left:200px; } #big a { display:inline-block; border:2px solid black; -webkit-border-radius:5px; width:55px; height:55px; } #small { position:absolute; top:100px; width:120px; height:120px; visibility:hidden; } 

JavaScript的

 $('#shrinkify').click(function() { $('div#big').shrinkTo($('#small'), { duration: 1000, easing: 'swing', opacity: false }); return false; }); 

Answer 2

见演示

以下内容适用于Chrome，Safari，FF 4+和Opera 10+。 神奇的是CSS3 transform和transition 。

HTML：

 Reset 
 

jQuery的：

 $('#z a').click(function(e){ e.preventDefault(); $('#z').addClass('dock'); }); $('#r').click(function(e){ e.preventDefault(); $('#z').removeClass('dock'); }); 

CSS：

 #z { position: absolute; left: 150px; top: 150px; transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-tranform: scale(1.1); transition: 0.6s ease-in; -o-transition: 0.6s ease-in; -moz-transition: 0.6s ease-in; -webkit-transition: 0.6s ease-in; -webkit-backface-visibility: hidden; // prevent webkit bug } #z.dock { left: -70px; top: -10px; transform: scale(0.5); -o-transform: scale(0.5); -moz-transform: scale(0.5); -webkit-transform: scale(0.5); transition: 1s ease-out; -o-transition: 1s ease-out; -moz-transition: 1s ease-out; -webkit-transition: 1s ease-out; -webkit-backface-visibility: hidden; // prevent webkit bug } 

见演示