Question

我正在寻找一种方法来启动网站中的徽标，以div为中心，其中隐藏了其他内容。然后，我希望徽标移动到位于页面中心的容器div左上方的最后安放位置。我使用jQuery来做到这一点，但还没有真正找到方法。继承人我所得到的，真的不是我想做的事情：

<style type="text/css">
div#container {
margin: 0px auto;
width: 1024px;
border: 1px solid green;
}

div#logo {
padding: 10px;
border: 1px solid red;
height: 100px;
width: 500px;
z-index: 9999;
background: red;
}

section#main-content {
border: 1px solid blue;
width: 1024px;
z-index: 1;
}

.centered{
    display:block;

    /*set the div in the center of the screen*/
    position:absolute;
    top:50%;
    left:35%;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#logo').hide();
    $('#main-content').hide();  
    $('#logo').addClass('centered').fadeIn('slow'); 
    $("#logo").animate({"top":"-=370px", "left":"-=270px"},1500) .delay(5000) .animate({"opacity":"100"},5000);
    $('#main-content').fadeIn();
    $('#logo').removeClass('centered'); 

});
</script>
</head>

<body>

<div id="container">
<header>
    <div id="logo">HEY</div>
</header>
<section id="main-content">
    <article>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi vitae nulla aliquam iaculis ut eget turpis. Aliquam gravida nisi ut felis convallis a consequat urna consequat. Nam sit amet dolor leo, eget rhoncus nisi. Ut et metus lacus, sit amet pretium enim. Etiam ac odio ut augue dapibus facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam mattis, sapien euismod convallis vulputate, diam tellus semper erat, vitae hendrerit quam sem sed odio. Quisque eget lectus ligula, sit amet lobortis augue.
            </p>
            <p>
            Cras ut est eget mi interdum fringilla eget vehicula elit. Integer convallis mattis odio, facilisis volutpat velit commodo viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque feugiat libero ac augue porta sodales. Mauris pulvinar augue at ante molestie ac malesuada ipsum lobortis. Mauris risus erat, cursus in interdum a, facilisis vitae felis. Curabitur augue velit, luctus posuere molestie ut, vehicula vel dui. Quisque et convallis elit. Proin bibendum varius molestie.
            </p>
            <p>
            Vivamus egestas rutrum lectus ut lacinia. Etiam magna metus, tristique ac bibendum vitae, semper tempor velit. Praesent dictum lacinia aliquam. Proin cursus, mauris eu bibendum sagittis, sem mauris faucibus orci, a elementum ipsum lectus sed mi. Donec vitae pharetra eros. Morbi vulputate, metus fermentum vestibulum varius, eros mauris facilisis sem, a elementum risus dui ac mi. Ut gravida tristique sodales. Nullam consequat euismod tellus tincidunt dictum. Duis vitae neque metus. Donec sodales diam eu massa ultricies in convallis nisl tempor. Morbi eu hendrerit nulla. Mauris dignissim, magna vitae volutpat sollicitudin, orci felis ornare turpis, quis ullamcorper risus sem vitae lectus. Donec fermentum elementum eros, vel sollicitudin est tempor in.
            </p>
            <p>
            Donec ornare tellus lectus. Integer ornare justo in augue sodales sit amet tempus mi varius. Morbi fringilla urna quis quam auctor id lacinia erat lobortis. Praesent ullamcorper nulla eget lectus hendrerit nec fermentum lectus viverra. Etiam quis velit velit. Phasellus ultrices leo ut sem commodo sed semper sem laoreet. Vivamus euismod imperdiet nibh eu convallis. Maecenas facilisis pellentesque mauris, a ornare nulla sagittis at. Donec turpis ipsum, scelerisque vitae pharetra ac, commodo vel metus. Morbi sollicitudin, mauris non rhoncus ultricies, mi orci euismod velit, quis sagittis turpis magna ac nulla. Curabitur commodo accumsan molestie.
            </p>
    </article>
</section>

Answer 1

$(document).ready(function() {

    $('#logo').hide();
    $('#main-content').hide();  
    $('#logo').addClass('centered').fadeIn('slow'); 
    $("#logo").animate({"top":"-=370px", "left":"-=270px"},1500).delay(5000);


    setTimeout(function(){
       $('#logo').removeClass('centered');
    }, 2000);
    setTimeout(function(){
       $('#main-content').show();
    }, 3000);
});

在页面休息之前加载徽标，然后移动到休息处并显示其余内容

1 个答案: