jQuery动画问题点击 - 需要两次+错误的效果

Question

jQuery动画问题点击 - 需要两次+错误的效果

Hyd*_*les 5 html css jquery navigationbar jquery-animate

所以我试图制作一个导航栏,当你点击一个按钮/跨度时,会出现一个div,从顶部到导航栏正下方.但是,当我点击'荷马'时,首先没有任何反应,但第二次点击,然后它出现另一个效果,我没有在任何地方使用.[我不知道效果的名字,但div显示在它自己的左上角.]

这就是我想要的事情:

当我点击导航栏中的"荷马"时,一个div从身体到身体.div必须在导航栏下移动到0px,因此导航栏的底部和div(hidden-homer)的顶部之间没有空格.当我再次点击荷马时,div(hidden-homer)必须再次离开屏幕,因此向上移动.

在JSFiddle中,它根本不起作用......

Firefox控制台中没有错误,1警告:" 不推荐使用getPreventDefault().请改用defaultPrevented. "
JSHint中没有错误(JSFiddle)

那2个问题:

当我点击'荷马'时,没有任何反应.
当我在'荷马'上第二次点击时 - 没有重新加载页面 - 在错误的位置(导航栏下面,因此你看不到它的一部分),div出现错误的效果.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script src="jquery.js"></script>
    <title></title>
    <meta charset="UTF-8">
</head>

<body>

    <div id="nav">
        <span>Homer</span>
        <span>Marge</span>
        <span>Bart</span>
        <span>Lisa</span>       
        <span>Maggie</span>
    </div>

    <div id="hidden-homer" class="hidden">
        <h1>Homer</h1>
        <p>Text</p>
    </div>

        <div id="hidden-marge" class="hidden">
        <h1>Marge</h1>
        <p>Text</p>
    </div>

    <div id="hidden-bart" class="hidden">
        <h1>Bart</h1>
        <p>Text</p>
    </div>

        <div id="hidden-lisa" class="hidden">
        <h1>Lisa</h1>
        <p>Text</p>
    </div>

    <div id="hidden-maggie" class="hidden">
        <h1>Maggie</h1>
        <p>Text</p>
    </div>

    <div id="intro">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">  
    </div>

Run Code Online (Sandbox Code Playgroud)

jQuery的:

    <script>
    var main = function() {
        $('#nav span:nth-child(1)').click(function() {
            $('#hidden-homer').toggle(function() {
                $(this).animate({top: '70px'}, 100);
                }, function() {
                    $(this).animate({top: '-70px'}, 100);
                });
        });
    };
    $(document).ready(main);
    </script>

Run Code Online (Sandbox Code Playgroud)

CSS:

    body {
    background-color: #0040FF;
    padding: 0px;
    margin: 0px;
}

a {
    outline: none;
}

#nav {
    height: 70px;
    line-height: 70px;
    background-color: #FFBF00;
    font-size: 0px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: none;
    z-index: 1;
}

#nav span {
    display: inline-block;
    font-size: 35px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-right: 3px solid #0040FF;
    height: 70px;
    cursor: pointer;
    color: #0040FF;
    text-decoration: none;
    font-weight: bold;
}

#nav span:first-child {
    border-left: 3px solid #0040FF;
}

#nav span:hover {
    background-color: #0040FF;
    color: #FFBF00;
}

.hidden {
    width: 100%;
    height: 200px;
    padding-left: 30px;
    background-color: #1C1C1C;
    color: red;
    font-size: 10px;
    top: -250px;
    position: absolute;
    z-index: -1;
    border: 2px solid black;
}

img {
    height: 200px;
    width: 400px;
    transform: rotate(10deg);
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bar*_*mar 3

使用变量来跟踪每次单击导航栏中的元素时 DIV 必须移动的方向。

var up = true;
$("#nav span:nth-child(1)").click(function() {
    $("#hidden-homer").animate({
        top: up ? "-70px" : "70px"
    }, 100);
    up = !up;
});

Run Code Online (Sandbox Code Playgroud)

你好，我们又见面了。首先我很抱歉这么晚才回来讨论这个问题。但经过长时间思考，我决定问你_为什么_这个解决方案有效。我是编程初学者，我将逐行描述我理解和不理解的内容。 (2认同)

归档时间：	11 年，1 月前
查看次数：	224 次
最近记录：	11 年，1 月前