jQuery/Jquery工具效果变小 [英] Jquery / Jquery Tools Getting Smaller Effect

问题描述

我想使用JQuery Tools(或仅使用JQuery)和HTML5开发一个屏幕.屏幕上将有一个主面板，并且面板上将带有圆形的方形按钮.当用户单击一个按钮时，该面板将变小，并将放置在左侧，右侧将出现一些内容.

I want to develop a screen with JQuery Tools(or just with JQuery) and HTML5. There will be a main panel at screen and it will have rounded square buttons on it. When user clicks a button this panel will get smaller and will be place at left side, something will appear at right side.

我的意思是:

大方块内部的正方形表示按钮.当用户单击1处的按钮时，面板将变小，并像2一样向左移.

Squares inside of big squares symbolizes buttons. When a user click a button at 1, panel will get smaller and go to left as like 2.

我可以这样使用: JQuery工具

推荐答案

就像我 发现了一段时间.似乎可以在Chrome 15中为我工作，因此也可能会在其他基于Webkit的浏览器中工作.这只是一个起点，因此跨浏览器的代码需要引起注意.

Looks like I found some time after all. Seems to work for me in Chrome 15, so will probably work in other webkit-based browsers as well. It's only a starting point so the cross-browser code needs some attention.

更新的演示 其中使用 shrinkTo jQuery插件

<a href="#" id="shrinkify">Shrinkify me</a>
<div id="small"></div>
<div id="big">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

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;
});

这篇关于jQuery/Jquery工具效果变小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！