Problems with jQuery Animating At Click - Twice needed + Wrong effect

Question

So I'm trying to make a navigation bar with when you click on a button / span, there appears a div, from the top, to just below the navigation bar. But, when I click 'Homer', First nothing happens, but the second time I click, then it appears WITH ANOTHER EFFECT, which I didn't use anywhere. [I don't know the effect's name, but the div appears from it's own left top corner.]

This is what I want that's going to happen:

When I click on 'Homer' in the navigation bar, a div comes from off the body to on the body. The div has to move to 0px under the navigation bar, so no space between the navigation bar's bottom, and the div(hidden-homer)'s top. When I click again on Homer, the div(hidden-homer) has to go off the screen again, so moving up.

In JSFiddle, it doesn't work at all...

No errors in Firefox Console, 1 warning: "Use of getPreventDefault() is deprecated. Use defaultPrevented instead."
No errors in JSHint (JSFiddle)

So 2 problems:

When I click on 'Homer', nothing happens.
When I click a second time on 'Homer' -without reloading the page- the div appears with a wrong effect at the wrong position(underneath the navigation bar, so you can't see a part of it).

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>

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>

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);
}

What version of jQuery are you using? The two-function form of `.toggle()` was removed in 1.9. — Barmar, May 01 '15 at 06:07
@Barmar Uncompressed: http://code.jquery.com/jquery-1.11.2.js — Coder, May 01 '15 at 06:09
Then you can't use `.toggle` like that. See http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata — Barmar, May 01 '15 at 06:10
Assuming you use an older version of jQuery that has `.toggle`, what you've written waits for you to click on the `nav` element first. When you do that, it adds a click handler on `#hidden-homer` that performs the alternating animations. — Barmar, May 01 '15 at 06:14
You haven't described how this is _supposed_ to work. And when you say _click on Homer_, it's unclear which Homer you mean: the one in the nav div, or the one in hidden-homer? — Barmar, May 01 '15 at 06:22
@Barmar Ok, I'll add it too in my question, but: When I click on Homer in the navigation bar, a div comes from *off* the body to *on* the body. The div has to move to 0px under the navigation bar, so no space between the navigation bar's bottom, and the div's top. When I click again on Homer, the hidden div has to go *off* the screen again, so moving up. — Coder, May 01 '15 at 06:27

Barmar · Accepted Answer · 2015-05-01T06:44:01.393

3

Use a variable to keep track of which direction the DIV has to move each time you click on the element in the nav bar.

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

edited May 01 '15 at 06:44

answered May 01 '15 at 06:34

Barmar

741,623
53
500
612

Hi, thank you! I don't have to click twice anymore..., but it doesn't work. I get an error about 'down' and I don't understand what happens (top: up ? "-70px" : "70px"), a quick explanation would help. – Coder May 01 '15 at 06:40
Sorry, I changed the name of the variable from `down` to `up`, but missed some places. – Barmar May 01 '15 at 06:44
Awww.... Thank you so much, but still... the div starts where it has to start(off the screen). But when I click 'Homer' it first moves some pixels down [I call it [1] for now], then I click again, it moves more down [2], then I click again it goes back to [1], but it doesn't go back off the screen... – Coder May 01 '15 at 07:03
I'm just copying the animation you had in your original code. The first click moves it up 70 pixels, the second one moves it down 70 pixels. You can change those to whatever you really want. – Barmar May 01 '15 at 07:08
2

Hi, again. First I'm sorry that I come back to this so lately. But I've decided after thinking a long time to ask you _why_ this solution works. I'm a beginner 'in' programming and I'll describe what I understand and don't understand per line. – Coder May 01 '15 at 11:33
The first line: it's a boolean, set to true, I understand that. The second and third line: that's what I already had, so I understand that too. But inside the animate function in line 4 it's getting harder. I don't understand what the 'top: up ? ' does. But you already said that the ' "-70px" : "70px" ' were the two clicks, the first one and the last one. Then the 5th line sets its 'speed'. The 6th line is what I don't understand too... 'up = !up'. What does this do? I already tried to search on Google, but googling 'up = !up' or 'top: up ?' doesn't work of course. Thank you. – Coder May 01 '15 at 11:37
@Hydra `?:` is the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). `!` is the [negation operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators). In other words: *if `up` is `true`, use negative length, else use positive length, then flip `up`*... – deceze May 01 '15 at 13:40
@deceze Aha, I think I get it now! – Coder May 01 '15 at 13:46
These are basic Javascript operators. They're the same as in C, PHP, and a number of other languages. Of course you're not going to find `up = !up` in Google, since I just made up that variable name. You should be able to find explanations of the syntax in whatever textbook or online site you used to learn Javascript from in the first place. – Barmar May 01 '15 at 15:36

Problems with jQuery Animating At Click - Twice needed + Wrong effect

1 Answers1