Масштаб DOM при загрузке страницы

Я хочу, чтобы элемент div масштабировался при загрузке страницы. Из того, что я искал, это правильный или почти правильный синтаксис с использованием jQuery; но при загрузке страницы ничего не происходит. Это, безусловно, простое исправление, я просто новичок в этом, чтобы заметить это.

<!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>

2 ответа

Решение

Попробуйте этот синтаксис (не забудьте включить jQuery AND jQueryUI):

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

Пример jsFiddle

(Обратите внимание, что $(function () { это сокращение для $(document).ready(function() {)

Эффект не прилипнет в конце. Я рекомендую вам анимировать свойство zoom css:

$(function () {
     $('#div1').animate({
         'zoom':2
    }, 500)
});

Рабочий пример: http://jsfiddle.net/basarat/eC23T/1/

Другие вопросы по тегам