Question

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

我希望徽标从当前位置移动到左上角（从顶部和左侧稍微填充）
我想缩小图像。

为了尝试这样做，我正在使用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为什么不缩放。有人可以帮助我吗？

谢谢！

Answer 1

不应$("#load")为$("#logo")？

Answer 2

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

$('#logo').animate({ /* your call here */ })
.position({ my: 'center', at: 'left top', of: document });

DIV不会通过JQuery UI移动或扩展

2 个答案: