1

我开始使用 HTML 5 应用程序。当我的页面加载时，我在屏幕中央有一个徽标。我需要屏幕中央的徽标才能开始。用户可以通过单击“开始”按钮开始使用该应用程序。发生这种情况时，我想以两种方式为徽标设置动画：

  1. 我希望徽标从其当前位置移动到左上角（顶部和左侧有一点填充）
  2. 我想缩小图像。

为了做到这一点，我正在使用 JQuery UI。这是我目前拥有的：

<body>
    <div id="wrapper">
        <div id="content">
            <div id="logo"></div>
            <input type='button' value='Begin' onclick='return beginButton_Click();' />
        </div>
    </div>

    <div id="footer">
        <span id="greeting" class="footer-content">
            Hello
        </span>
        <span class="separator">|</span>
        <a href="#" target="_blank" class="footer-content">View Status</a>
    </div> 

    <script type='text/javascript'>
      function beginButton_Click() {
        $("#load").animate({
          width: "30%",
          height: "30%",
          opacity: 0.4
        }, 1500);

      }
    </script>
</body>

我的 CSS 在另一个文件中定义。我的 CSS 看起来像这样：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body, #footer {
    background-color: #2D2D2D;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    margin-bottom: -34px;
    background-color: #4cff00;
    text-align: center;
    overflow: auto;
}

#content {
    margin-top: 200px;
    width: 350px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

#logo {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 70px;
    margin-bottom: 5px;
    background: transparent url(/images/logo.png) no-repeat center center;
}

#footer {
    text-align: left;
    width: 100%;
    overflow: hidden;
}

.footer-separator {
    display: inline-block;
    vertical-align: middle;
}
#info{
    margin-left: 10px;
}
.footer-content, .action {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
}

目前，我的徽标 div 没有缩放或移动到左上角。我不知道如何移动 div，因为它相对定位。然而，我需要它在屏幕中间。除此之外，我不知道为什么 div 没有缩放。有人可以帮帮我吗？

谢谢！

4

2 回答 2

2

不$("#load")应该$("#logo")吗？

于 2013-07-31T13:11:45.947 回答
0

您应该更改#load为#logo在 jQuery 选择器中选择该 div 以进行动画调用。为了将其移动到左上角，您可以使用 jQuery UI 中的 position()。

$('#logo').animate({ /* your call here */ })
.position({ my: 'center', at: 'left top', of: document });
于 2013-07-31T13:16:12.550 回答