Question

您好我试图为这样的网站制作目标网页。

当选择其中一个导航项目时，我想将导航和徽标设置为顶部动画，以便具有实际内容的页面有空间。当我尝试将徽标设置为顶部动画时，它不会发生。它只是在页面的左侧而不是顶部。（下同）

所以我要做的就是将徽标放入容器的右上角。我想这样做，以便我不必去网站上的另一个页面。它全部位于index.html上，但是窗口内外的动画不同页面。

HTML

<body>
    <div id="main_bg" class="bg">
        <div class="container">
            <div class="row showing" id="m_page">
                <div id="main_holder">
                    <div id="logo">
                        <h1 class="text-center"><a id="main_trigger" href="#main">Bk</a></h1> </div>
                    <h2 id="typedtext" class="name-title text-center"></h2>
                    <nav class="text-center main_nav">
                        <ul>
                            <li><a id="about_trigger" href="#about">who am i</a></li>
                            <li>
                                <span>-</span>
                            </li>
                            <li class="nav_border"><a id="pro_trigger" href="#projects">projects</a></li>
                            <li>
                                <span>-</span>
                            </li>
                            <li class="nav_border"><a id="skills_trigger" href="#skills"><span>"</span>skills<span>"</span></a></li>
                            <li>
                                <span>-</span>
                            </li>
                            <li class="nav_border"><a id="contact_trigger" href="#contact">contact</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="row">
                    <div id="avi_holder" class="text-center">
                        <h3>Availability</h3>
                        <div id="arrow_img"> <img src="img/ic_keyboard_arrow_down_black_24dp_1x.png" /> </div>
                        <div id="avi_status">
                            <input type="button" value="I need work now!"> </div>
                    </div>
                </div>
            </div>
            <div class="row hidden" id="a_page">
                <h1>About Page</h1></div>
            <div class="row hidden" id="p_page">
                <h1>Projects Page</h1></div>
            <div class="row hidden" id="s_page">
                <h1>Skills Page</h1></div>
            <div class="row hidden" id="c_page">
                <h1>Contact Page</h1></div>
        </div>
    </div>
</body>

CSS

/* ============================ GENERAL STYLES ============================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    overflow-y: hidden;
    font-family: "Quicksand", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

span {
    font-family: sans-serif;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none !important;
    color: inherit !important;
}

nav a {
    text-decoration: none;
    color: #222;
}

nav a:hover {
    text-decoration: none;
    color: #333;
}

.bg {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 900;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: auto;
}

.text-center {
    text-align: center;
}


.hidden {
    display: none;
}

.showing {
    display: block;
}

/* ============================ MAIN PAGE STYLES ============================ */

#main_bg {
    background-image: url('http://www.publicdomainpictures.net/pictures/120000/velka/white-texture-background.jpg');
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

#main_holder {
    position: relative;
    background-color: transparent;
    height: 400px;
    margin-top: 20%;
}

#logo {
    font-size: 4rem;
    font-family: 'Life Savers', cursive;
    border: 2px solid black;
    width: 100px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.78);
}

.name-title {
    padding-top: 10px;
}

#logo h1 {
    margin: 0px;
    padding-bottom:
}

.main_nav ul li {
    font-size: 2.5rem;
}

.main_nav li {
    display: inline;
    padding-left: 4px;
    padding-right: 4px;
}

li p {
    display: inline-block;
}

#avi_holder {
    position: absolute;
    width: 30%;
    margin-left: -15%;
    bottom: 10px;
    left: 50%;
}

#avi_holder h3 {
    margin: 0px;
}

input[type="button"] {
    height: 46px !important;
    font-size: 1em !important;
}

.top-nav {
    border-bottom: 1px solid black;
}

.top-nav ul {
     margin-bottom: 0px;
}

.top-nav ul li{
    display: inline-block;
    font-size: 3rem;
    padding-left: 15px;
    padding-right: 15px;
}

JS

$("#avi_status").hover(function (event) {
    $("#arrow_img").stop().animate({
        paddingBottom: "10px"
    }, 200);
}, function () {
    $("#arrow_img").stop().animate({
        paddingBottom: "0px"
    }, 200);
});

    $("#about_trigger").click(function () {
        $("#logo").animate({
            display: "absolute"
            , top: "10px"
            , margin: "0px"
            , fontSize: "3em"
            , left: "10px"
        }, 1000);
    });

jQuery动画导航问题

0 个答案: