Question

我希望在加载页面时缩放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>

Answer 1

尝试这种语法（记得包含jQuery和jQueryUI）：

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

<强> jsFiddle example

（请注意$(function () {是$(document).ready(function() {）

的简写

Answer 2

效果不会坚持到最后。我建议你为zoom css属性设置动画：

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

工作示例：http://jsfiddle.net/basarat/eC23T/1/

在页面加载时缩放DOM

2 个答案: