JsFiddle

Question

我想创建一个着陆页，其中包含：

首先，您会在屏幕中间看到网站的徽标。
然后我希望它能够移动到正确的位置。然后整页加载。

这可能吗？提前谢谢！

EDIT2：现在我有这个： HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").delay("1000").animate({top:"-=30px", width:"300px", height:"300px",})
})
</script>
</head>
<body>
<div class="loader"></div>
</body>
</html>

CSS：

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png') 50% 50% no-repeat rgb(249,249,249);
}

但是现在的图像，并没有调整大小，只是裁剪了这些图像的两侧。所以你把它作为一个页面：http://prntscr.com/47t9rg

一些帮助？

Answer 1

只需搜索/尝试一些事情，而不是询问整个代码。

尝试以下代码，这可能有用。

$(".loader").animate({
  left: someValue,
  top: someValue
}, 1000)

Answer 2

对于初学者，您应该使用：

jQuery(document).ready(function(e) {
   jQuery(".loader").delay("1000").fadeOut("slow");
});

其次，您需要使用jQuery's animate。然后，只需将左侧位置更改为您想要的位置即可。

Answer 3

使用jQuery animate并将动画包装在$(document).ready(

中

$(document).ready(function () {
    $("#Logo").animate({
        left: "-=100px"
    }, 1000, function () {
        // Animation complete.
        //Send AJAX Request to fetch content, or redirect to another page?
    });
});

JsFiddle

这是做什么的;

等到文档准备就绪（所有元素都已加载）
动画#Logo元素向左移动100px（在JSFiddle上的CSS中，即容器宽度的一半） - 导致它位于左上角

如何将徽标放在中间然后移到正确的位置？

3 个答案:

JsFiddle

这是做什么的;