如何使用 jQuery 在頁面加載時放大 div？

Question

有沒有辦法在頁面加載時進行 div 放大？ 就像您在 Chrome 中安裝新應用一樣，它會將您帶到新標簽頁並放大新應用。 看起來很好。

有人知道如何用 jQuery 做到這一點嗎？

Answer 1

這是使用 jQuery 進行縮放的一種方法

示例 jsfiddle

在 CSS 中設置起始尺寸（以及 position 與top和left的偏移）：

#zoom-box {
    background: #7d7e7d;
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
    border-radius:10px;
    width:0;
    height:0;
    position:relative;
    top:150px;
    left:150px;
    border:solid 4px yellow;
    font-size:0;
    line-height:0;
    vertical-align:middle;
    text-align:center;
    color:#fff;
}

然后使用 jQuery animate()方法調整所有內容

$('#zoom-box').animate({
    width:'300px',
    height:'300px',
    top:'0',
    left:'0',
    'font-size':'50px',
    'line-height':'300px'
}, 1000);

Answer 2

您將需要放大 DIV 內的所有內容，例如圖像、增加文本大小等...

也許有 jQuery 的縮放插件。

Answer 3

CSS：

div {
    width:50px;
    height:50px;
    margin:20px;
    background-color:red;
    font-size:1em;
}

.big {
    width:100px;
    height:100px;
    font-size:2em;
}

JQuery（使用 JQueryUI）：

$(function(){
      $('#my_div').addClass("big",500).removeClass("big",500);
});

這是演示： http://jsfiddle.net/tjRvn/

不幸的是，帶有持續時間的addClass()今晚在 Chrome 中不起作用。 詭異的：/