Search code examples
jqueryanimationscaleonload

Scale DOM on page load

I want to have the div element scaled when the page is loaded. From what I've searched this is correct or almost correct syntax using jQuery; but when I load the page nothing happens. This is surely a simple fix I just am too new at this to spot it.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
</head>
<body>


    <script src="jquery.js"></script>
    <script>
     $("body").onload(function() {
     $('#div1').effect('scale'{percent:200},1000)
     });
    </script>

<div id="div1"></div>

</body>
</html>
Solution

  • Try this syntax (remember to include jQuery AND jQueryUI):

    $(function () {
    $('#div1').effect('scale', {
        percent: 200
    }, 1000)
});

    jsFiddle example

    (note that $(function () { is shorthand for $(document).ready(function() {)