How to zoom a div in on page load with jQuery?

Question

Is there a way to make a div zoom-in when the page loads? Like when you install a new app in Chrome, it brings you to the new tab page and zooms in the new app. It looks nic

Answer 1

here's one way to zoom with jQuery

example jsfiddle

set starting sizes (and position offset with top & left) in your CSS:

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

then size everything up with a jQuery animate() method

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